文章の目录
表格存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。
1、table 标签
table 标签表示表格数据-------即通过二维数据表表示的信息。
1.1、基本语法格式
table 里面包含的二级元素按如下格式：
- 一个可选的
<caption>元素- 零个或多个的
<colgroup>元素- 一个可选的
<thead>元素 下列任意一个:
- 零个或多个
<tbody>- 零个或多个
<tr>- 一个可选的
<tfoot>元素
具体使用情况见如下代码：
<table>
<caption>Awesome caption</caption>
<colgroup>
<col span="2" class="batman">
<col span="2" class="flash">
</colgroup>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
<th>Header content 3</th>
<th>Header content 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
<td>Body content 3</td>
<td>Body content 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
<td>Footer content 3</td>
<td>Footer content 4</td>
</tr>
</tfoot>
</table>
1.2、常见的属性
表格标签 table 支持全局属性。
下列的 border、cellspacing、cellpadding、width、height、align、bgcolor、frame、rules、summary 已经废弃，用CSS来代替。
1.3、总结
- table 开始标签和结束标签不能省略；
- 表格中由行中的单元格组成；
- 表格中没有列元素，列的个数取决于行的单元格个数；
2、表格标题 caption
HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。
2.1、基本语法格式
见1.1
2.2、常见的属性
caption 标签支持全局属性。
2.3、总结
- caption 开始标签和结束标签都不能省略；
- 当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，使用 figcaption 元素替代 caption；
- caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上；
- caption标签必须紧随table标签之后；
3、表格列组 colgroup
表格列组（Column Group <colgroup>）标签用来定义表中的一组列表。
3.1、基本语法格式
见1.1
3.2、常见的属性
colgroup 标签支持全局属性，除此之外，还支持如下属性：
3.2.1、bgcolor
这个属性用于定义列组中的每一个列成员的背景颜色。但不要使用这个并未被标准化的属性，它只是在 IE 的某些版本中生效。
3.2.2、span
这个属性包含一个正整数，表示 colgrouup 定义的连续列组的个数，如果没有定义的话，默认值为1。
3.3、总结
- 如果元素的第一个子元素存在且是一个
<col>元素，而且在它之前没有省略了结束标签的<colgroup>元素，元素的开始标签可以被省略； - 如果之后没有紧跟一个空格或注释，元素的结束标签可以被省略；
- 如果 colgroup 有一个或多个子元素 col 的话，是不能使用 span 属性的；
3.4、col 子元素
col 元素定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于 <colgroup> 元素内。
3.4.1、基本语法格式
见1.1
3.4.2、常见的属性
col 标签支持全局属性，除此之外，还支持如下属性：
3.4.2.1、bgcolor
这个属性用于定义列组中的每一个列成员的背景颜色。但不要使用这个并未被标准化的属性，它只是在 IE 的某些版本中生效。
3.4.2.2、span
这个属性包含一个正整数，表示 colgrouup 定义的连续列组的个数，如果没有定义的话，默认值为1。
3.4.3、总结
- 因为它是一个单标签（空元素），开始标签是必须的，但是禁止使用结束标签；
4、题头 thead
<thead> 元素定义了一组定义表格的列头的行。
4.1、基本语法格式
见1.1
4.2、常见的属性
thead 标签支持全局属性，除此之外，还支持如下属性：
4.2.1、bgcolor
这个属性用于定义每个单元格的背景颜色。但不要使用这个并未被标准化的属性，它只是在 IE 的某些版本中生效。
4.3、总结
- 开始标签是必须的，如果 thead 后面直接跟着 tbody 或 tfoot，结束标签可以省略；
- 子元素为零或多个 tr 标签；
5、正文 tbody
tbody 标签封装了一组行，表明它们组成了表的主体。
5.1、基本语法格式
见1.1
5.2、常见的属性
tbody 标签支持全局属性。
5.3、总结
- 子元素为零或多个 tr 标签；
- tbody 不是 table 必须的子元素，如果 table 有一个 tr 作为子元素，则 tbody 必须不存在；
- 如果 table 包含一个 thead 块，那么 tbody 块必须在它之后；
- 如果使用了 tbody，你不能有是 table 直接子元素，而不包含在 tbody 中的表行元素 tr，所有的非页眉和非页脚都必须在 tbody 中；
- 每个 table 可以使用多个 tbody，只要它们是连续的。这允许您将达标中的行划分为几个部分，如果需要，每个部分都可以单独格式化；
- tbody 元素应该与 thead 和 tfoot 元素结合起来使用；
6、表行 tr
<tr> 元素定义表格中的行。同一行可同时出现 <td> 和 <th> 元素。
6.1、基本语法格式
见1.1
6.2、常见的属性
tr 标签支持全局属性。
6.3、总结
- 子元素为0或者多个 td 或 th 标签，或者他们的混合；
- 开始标签是必须的，如果 tr 后面紧跟着一个 tr，或者父元素（thead、tbody、tfoot）没有任何内容，则结束标签可以省略；
6.4、th
th 标签定义表格内的表头单元格。这部分特征是由 scope 和header 属性准确定义的。
6.4.1、基本语法格式
见1.1
6.4.2、常见的属性
th 标签支持全局属性，除此之外，还支持如下属性：
6.4.2.1、bgcolor
这个属性定义了每列中每单元格的背景色。不要使用这个属性，它不是标准属性且仅在某些版本的 Microsoft Internet Explorer 支持。
6.4.2.2、colspan
这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为1 。超过1000的值被视作1000。
6.4.2.3、headers
这个属性包含了一个空间分隔的字符串的列表，每个与其他<th> 元素相关联的 id 属性一一对应。
6.4.2.4、rowspan
这个属性包含一个正整数，表示了每单元格中扩展列的数量。默认值为1。如果该值被设置为 0，这个单元格就被扩展为(<thead>，<tbody> 或 <tfoot>)中表格部分的最后一个元素。比65534大的值被视作65534。
6.4.2.5、scope
这个枚举属性定义了表头元素 (在 <th> 中定义) 关联的单元格。它可能有以下值：
6.4.2.5.1、row
表头关联一行中所有的单元格。
6.4.2.5.2、col
表头关联一列中所有的单元格。
6.4.2.5.3、rowgroup
表头属于一个行组并与其中所有单元格相关联。这些单元格可以被放在表头的左侧或右侧，取决于 <table> 元素中 dir 属性的值 。
6.4.2.5.4、colgroup
表头属于一个列组并与其中所有单元格相关联。
6.4.2.5.5、auto
6.4.3、总结
- 开始标签是必需要的，而结束标签有时可以省略：当其后是
<th>或<td>，或者其后没有其他数据内容在其父元素内；
6.5、td
td 标签定义了一组包含数组的表格单元格。
6.5.1、基本语法格式
见1.1
6.5.2、常见的属性
th 标签支持全局属性，除此之外，还支持如下属性：
6.5.2.1、bgcolor
这个属性定义了每列中每单元格的背景色。不要使用这个属性，它不是标准属性且仅在某些版本的 Microsoft Internet Explorer 支持。
6.5.2.2、colspan
这个属性包含一个正整数，表示了每单元格中扩展列的数量。默认值为1 。超过1000的值被视作1。
6.5.2.3、headers
这个属性包含了一个空间分隔的字符串的列表，每个与其他<th> 元素相关联的 id 属性一一对应。
6.5.2.4、rowspan
这个属性包含一个正整数，表示了每单元格中扩展列的数量。默认值为1。如果该值被设置为 0，这个单元格就被扩展为(<thead>，<tbody> 或 <tfoot>)中表格部分的最后一个元素。比65534大的值被视作65534。
6.5.3、总结
- 开始标签是必需要的，而结束标签有时可以省略：当其后是
<th>或<td>，或者其后没有其他数据内容在其父元素内；
6.6、th、td 应用场景之合并单元格
合并单元格是我们比较常用的一个操作，但是不会合并的很复杂。
6.6.1、合并单元格2种方式
- 跨行合并：rowspan=“合并单元格的个数”；
- 跨列合并：colspan=“合并单元格的个数”；
6.6.2、合并单元格的顺序
合并单元格的顺序，我们按照先上后下，先左后右的顺序，跟我们以前学习汉字的书写顺序完全一致。
6.6.3、合并单元格的三步曲
- 先确定是跨行还是跨列合并；
- 根据先上后下，先左右后的原则找到目标单元格，然后写上合并方式，还有要合并的单元格数量；
- 删除多余的单元格；
7、脚注 tfoot
<tfoot> 定义了一组表格中各列的汇总行。
7.1、基本语法格式
见1.1
7.2、常见的属性
tfoot 标签支持全局属性，除此之外，还支持如下属性：
7.2.1、bgcolor
此属性定义了列内单元格的背景色。 请勿使用此属性，因为这并非标准，且只有某些特定版本的 Microsoft Internet Explorer（IE浏览器）支持。
7.3、总结
- 子元素为零或多个 tr 标签；
- 开始标签是必需的。在父元素
<table>没有后续内容的情况下，结束标签可被省略。 <tfoot>必须出现在一个或多个<caption>，<colgroup>，<thead>，<tbody>，或<tr>元素之后。 注意这是自 HTML5 起有的要求。HTML 4<tfoot>元素不能放在任何<tbody>或<tr>元素之后。注意，这与上述HTML5的标准相冲突。
8、浏览器兼容性
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
