---

表格存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。

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、总结

1. table 开始标签和结束标签不能省略；
2. 表格中由行中的单元格组成；
3. 表格中没有列元素，列的个数取决于行的单元格个数；

2、表格标题 caption

HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。

2.1、基本语法格式

见1.1

2.2、常见的属性

caption 标签支持全局属性。

2.3、总结

1. caption 开始标签和结束标签都不能省略；
2. 当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，使用 figcaption 元素替代 caption；
3. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上；
4. 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、总结

1. 如果元素的第一个子元素存在且是一个 <col> 元素，而且在它之前没有省略了结束标签的 <colgroup> 元素，元素的开始标签可以被省略；
2. 如果之后没有紧跟一个空格或注释，元素的结束标签可以被省略；
3. 如果 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、总结

1. 因为它是一个单标签（空元素），开始标签是必须的，但是禁止使用结束标签；

4、题头 thead

<thead> 元素定义了一组定义表格的列头的行。

4.1、基本语法格式

见1.1

4.2、常见的属性

thead 标签支持全局属性，除此之外，还支持如下属性：

4.2.1、bgcolor

这个属性用于定义每个单元格的背景颜色。但不要使用这个并未被标准化的属性，它只是在 IE 的某些版本中生效。

4.3、总结

1. 开始标签是必须的，如果 thead 后面直接跟着 tbody 或 tfoot，结束标签可以省略；
2. 子元素为零或多个 tr 标签；

5、正文 tbody

tbody 标签封装了一组行，表明它们组成了表的主体。

5.1、基本语法格式

见1.1

5.2、常见的属性

tbody 标签支持全局属性。

5.3、总结

1. 子元素为零或多个 tr 标签；
2. tbody 不是 table 必须的子元素，如果 table 有一个 tr 作为子元素，则 tbody 必须不存在；
3. 如果 table 包含一个 thead 块，那么 tbody 块必须在它之后；
4. 如果使用了 tbody，你不能有是 table 直接子元素，而不包含在 tbody 中的表行元素 tr，所有的非页眉和非页脚都必须在 tbody 中；
5. 每个 table 可以使用多个 tbody，只要它们是连续的。这允许您将达标中的行划分为几个部分，如果需要，每个部分都可以单独格式化；
6. tbody 元素应该与 thead 和 tfoot 元素结合起来使用；

6、表行 tr

<tr> 元素定义表格中的行。同一行可同时出现 <td> 和 <th> 元素。

6.1、基本语法格式

见1.1

6.2、常见的属性

tr 标签支持全局属性。

6.3、总结

1. 子元素为0或者多个 td 或 th 标签，或者他们的混合；
2. 开始标签是必须的，如果 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、总结

1. 开始标签是必需要的，而结束标签有时可以省略：当其后是 <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、总结

1. 开始标签是必需要的，而结束标签有时可以省略：当其后是 <th> 或 <td> ，或者其后没有其他数据内容在其父元素内；

6.6、th、td 应用场景之合并单元格

合并单元格是我们比较常用的一个操作，但是不会合并的很复杂。

6.6.1、合并单元格2种方式

• 跨行合并：rowspan=“合并单元格的个数”；
• 跨列合并：colspan=“合并单元格的个数”；

6.6.2、合并单元格的顺序

合并单元格的顺序，我们按照先上后下，先左后右的顺序，跟我们以前学习汉字的书写顺序完全一致。

6.6.3、合并单元格的三步曲

1. 先确定是跨行还是跨列合并；
2. 根据先上后下，先左右后的原则找到目标单元格，然后写上合并方式，还有要合并的单元格数量；
3. 删除多余的单元格；

7、脚注 tfoot

<tfoot> 定义了一组表格中各列的汇总行。

7.1、基本语法格式

见1.1

7.2、常见的属性

tfoot 标签支持全局属性，除此之外，还支持如下属性：

7.2.1、bgcolor

此属性定义了列内单元格的背景色。 请勿使用此属性，因为这并非标准，且只有某些特定版本的 Microsoft Internet Explorer（IE浏览器）支持。

7.3、总结

1. 子元素为零或多个 tr 标签；
2. 开始标签是必需的。在父元素 <table> 没有后续内容的情况下，结束标签可被省略。
3. <tfoot> 必须出现在一个或多个 <caption>，<colgroup>，<thead>，<tbody>，或 <tr> 元素之后。 注意这是自 HTML5 起有的要求。HTML 4 <tfoot> 元素不能放在任何 <tbody> 或 <tr> 元素之后。注意，这与上述HTML5的标准相冲突。

8、浏览器兼容性

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！