表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但是在实际制作过程中，表格更多用在网页布局的定位上。很多网页都是以表格布局的。这是因为表格在文本和图像的位置控制方面都有很强的功能。

表格的基本构成

表格由行、列、和单元格3部分组成，一般通过3个标记来创建，分别是表格标记<table>、行标记<tr>、和单元格标记<td>。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。

创建表格的四个元素：

table、tr、th、td

<tabel>...</table>:整个表格以<table>标记开始、</table> 标记结束。

<tr>...</tr>：表格的一行，那么以为着有几对<tr></td>，表格就有几行。

<td>...</td>:表格的一个单元格，一行中包含几对<td></td>,说明一行中就有几列。

<th></th>:表格的头部的一个单元格，表格表头。

表格中列的个数，取决于一行中数据单元格的个数

<table>

    <tr>

        <th>动物名称</th>

        <th>物种</th>

        <th>生活习性</th>

        <th>食性</th>

    </tr>

    <tr>

        <td>老虎</td>

        <td>猫科动物</td>

        <td>单独活动</td>

        <td>肉食</td>

    </tr>

    <tr>

        <td>狮子</td>

        <td>猫科动物</td>

        <td>集群</td>

        <td>肉食</td>

    </tr>

    <tr>

        <td>大象</td>

        <td>哺乳纲动物</td>

        <td>群居</td>

        <td>草食</td>

    </tr>

</table>

内容仅做实例参考，不保证其真实性

表格属性

表格标题caption

一个表格只能有一个标题

在上述代码的<table></table>间添加<caption>动物世界</caption>

表格宽度与高度

表格宽度为width，高度为height

语法为<table width="500" height="130">

以下功能实现与此类似，将不进行示例

表格表头对齐方式align

语法为<table align="对齐方式">

在对齐方式中填入相应的属性值：

left:左对齐

center：居中

right：右对齐

表格边框宽度border

border值不设置时或设置为0时，显示为无边框

语法为<table border="5"> , 5为边框宽度

表格边框颜色bordercolor

语法为<table bordercolor="#66ccff"> ， 各颜色对应的具体编码可从网上查找

表格内框宽度cellspacing

表格内框宽度属性用于设置表格内部每个单元格之间的间距

语法为<table cellspacing="内框宽度值">

表内文字与边框边距cellpadding

在默认情况下，单元格里的内容会紧贴着表格的边框，这样看上去会非常拥挤，可用词语法设置其间距离

语法为<table cellspadding="文字与边框距离值">

表格背景颜色bgcolor

语法为<table bgcolor="7fffaa">

表格背景图像background

语法为<table background="图片链接">

表格表首标记thead

表首样式的开始标记是<thead>，结束标记是</thead>。它用于定义表格最上端表首的样式，可以设置背景颜色、文字对齐方式、文字垂直方式等。

表主体标记tbody

表主体标记与表首标记功能类似，表主体样式用于统一设计表主体部分的样式，标记为<tbody>

表格表尾标记tfoot

<tfoot>用于定义表尾样式

行属性

表格行属性设置

表格中行属性的设置与表格的属性设置类似，只需要将相关的属性值添加在行标签中即可，如<tr width="5" height="3" align="content" bordercolor="#66ccff" cellspacing="3">

多个参数值用空格隔开

表格行对齐方式

表格中行对齐方式除了上面在表头对齐方式中介绍的水平对齐方式align，还有垂直对齐方式valign

语法为<tr valign="对齐方式">

可设置的值有三个：top、middle、bottom

valign也可用于单元格属性

单元格属性

单元格大小

语法为<td width="8" height="5">

水平跨度colspan

在设计表格时，有时需要将两个或多个相邻单元格合成一个单元格

语法为<td colspan="跨度的列数">

垂直跨度rowspan

单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行

语法为<td rowspan="跨度的行数">

给出一段实例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Demo</title>

</head>

<body>

    <table width="500" height="300" align="content" border="5" bordercolor="#66ccff" cellspacing="3" bgcolor="7fffaa">

    	<caption>动物世界</caption>

    <tr>

        <th>动物名称</th>

        <th>物种</th>

        <th>生活习性</th>

        <th>食性</th>

    </tr>

    <tr align="center">

        <td>老虎</td>

        <td>猫科动物</td>

        <td>单独活动</td>

        <td rowspan="2">肉食</td>

    </tr>

    <tr align="center">

        <td>狮子</td>

        <td>猫科动物</td>

        <td>集群</td>

    </tr>

    <tr align="center">

        <td>大象</td>

        <td>哺乳纲动物</td>

        <td>群居</td>

        <td>草食</td>

    </tr>

</table>

</body>

</html>

HTML中的表格标签的更多相关文章

  1. 详解HTML中的表格标签

    详细代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  2. H5 表格标签的其它标签

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. H5 表格标签基本使用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  5. 9月6日表格标签（table、行、列、表头）（补）

    一.<table> <table>代表表格标签.   <table></table> 1.width  表示表格宽度,宽度表达方式有像素和百分比两种.网 ...

  6. 关于html中table表格tr,td的高度和宽度

    关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...

  7. HTML表格标签

    table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...

  8. html系列教程--span style 及表格标签 title video

    <span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...

  9. HTML表格标签的使用-&lt;table&gt;

    <html> <head> <title> 表格标签 </title> <!-- 标签名:table 定义一个表格 子标签:<caption ...

随机推荐

  1. Powershell基础之脚本执行

    Bat 这就是我们常用的Bat脚本,全名为批处理文件,脚本中就是我们在CMD中使用到的命令,这里提一个小问题:CMD的命令行执行命令的优先级是.bat > .exe,那么假如我放一个cmd.ba ...

  2. ASP.NET Core在 .NET Core 3.1 Preview 1中的更新

    .NET Core 3.1 Preview 1现在可用.此版本主要侧重于错误修复,但同时也包含一些新功能. 这是此版本的ASP.NET Core的新增功能: 对Razor components的部分类 ...

  3. iOS开发请您把握现在 — 面向未来学习

    iOS开发请您把握现在 — 面向未来学习 这一篇文章,如果你是一名iOS开发正好也处于开发晋升瓶颈迷茫期,不妨停下你的脚步,花五分钟看看,兴许有你需要的!文章结尾有彩蛋 群里常见的唱哀 iOS现在到底 ...

  4. MS08-067 远程执行代码 漏洞复现

    漏洞编号:MS08-067 披露日期: 2008/10/22 受影响的操作系统:Windows 2000;XP;Server 2003;Server 2008;   目标系统 Microsoft(R) ...

  5. Java中package与import

    使用实例: package 一般来说,package语句必须作为源文件的第一条非注释性语句.一个java源文件只能指定一个包,即只能包含一条package语句,该源文件中可以定义多个类,则这些类将全部 ...

  6. ESP8266开发之旅 进阶篇⑤ 代码规范 —— 像写文章一样优美

    1.前言     之前,一直在跟大伙分享怎么去玩蓝牙模块,怎么去玩wifi模块,怎么去玩json,然后有很多小伙伴就留言各种问题或者说直接怼他的代码过来让我看,然后我就一脸懵逼(代码中到处各种abcd ...

  7. angular7新特性

    Angular 是最流行的 Web 应用程序开发框架之一.随着 Angular 7 的发布,它为 Web 开发人员带来了更多功能,包括核心框架.Angular Material.与主要版本保持同步的 ...

  8. vue 开发插件流程

    UI demo UI 插件汇总 我的github iSAM2016 在练习写UI组件的,用到全局的插件,网上看了些资料.看到些的挺好的,我也顺便总结一下写插件的流程: 声明插件-> 写插件-&g ...

  9. Mac高效开发之iTerm2、Prezto和Solarized主题

    本文首发于个人网站:Mac高效开发之iTerm2.Prezto和Solarized主题 工欲善其事必先利其器,作为开发,我追求极致的高效,因此会在很多细节上追求效率,例如:命令行窗口敲命令的时候,如果 ...

  10. kali2019里安装Burp Suite安装破解版加汉化版

    Burpsuite是一个强大web漏洞挖掘工具,截断代理,解码和编码,Fuzzy进行各种注入和暴力破解 插件扩展,有多个模块 Burp Suite没有中文版的,我英语又不好,我虽然精通Burp Sui ...