HTML标签 - 表格标签

在过去网站开发过程中，表格标签的使用是非常非常多，绝大多数的网站都是使用表格标签来制作的，也就是说表格标签是一个时代的代表。

什么是表格标签？

表格标签的作用是用来给一堆数据添加表格语义，其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。

表格结构

由于表格中存储的数据比较复杂，为了方便管理、阅读以及提升语义，我们可以对表格中存储的数据进行分类。

表格中存储的数据可以分为四类：
1. 表格标题
2. 表格表头
3. 表格主体
4. 表格的页尾信息
表格完整结构

html 复制代码

<table>
  <caption>表格的标题</caption>
  <thead>
    <tr>
      <th>每一列的标题</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>数据</td>
    </tr>
  </tfoot>
</table>

表格标签

table标签
- 作用：表格标签中的table代表整个表格，也就是一对table标签就是一个表格。
tr标签
- 作用：表格标签的tr代表表格中的一行数据，也就是说一对tr标签就是表格中的一行。
td标签
- 作用：表格标签中的td标签代表表格中的一个单元格，也就是说一对td标签就是表格中的一个单元格。
caption标签
- 作用：在表格标签中提供了一个标签专门用来设置表格的标题，这个标签叫做caption。只要将标题写在caption标签中，那么标题就会自动相对于表格的宽度居中。
- 注意点：
  - caption标签一定要写在table标签中，否则无效。
  - caption一定要紧跟在table标签后面。
th标签
- 作用：在表格标签中提供了一个标签专门用来展示每一列的标题，这个标签叫做th标签，只要使用th标签展现当前列的标题，这时标题就会在该标签单元格中自动居中。
thead标签
- 作用：指定表格表头信息。
tbody标签
- 作用：指定表格主体信息。
- 注意点：如果我们没有编写tbody，系统会自动给我门添加tbody
tfoot标签
- 作用：指定表格附加信息。
- 注意点：如果指定了thead和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己的默认高度，不会随着表格的高度变化而变化。

总结：

表格标签有一个边框属性，这个属性决定了边框的宽度，默认情况下这个属性的值是0，所以看不到边框。
表格标签和列表标签一样，它是一个组合标签，所以table/tr/td要么一起出现，要么一起不出现，不会单独出现。
表格中有两种单元格，一种是td，一种是th，td是专门用来存储数据的，th是专门用来存储当前列的标题的。

表格标签的属性（这部分内容仅为了解，以后均通过CSS来进行修改）：

宽度和高度的属性（可以给table标签和td标签使用）
- 表格的宽度和高度默认按照内容尺寸调整，也可以通过给table标签设置width/height属性的方式来手动指定表格宽高。
- 如果给td标签设置width/height属性，会修改当前单元格的宽度（会同时影响当前列单元格宽度）和高度（会同时影响当前行单元格高度），不会影响整个表格的宽度和高度。
  - 当给一行中不同单元格设置不同的height属性，保留一行中高度最高的属性值作为该行单元格的高度。
  - 当给一列中不同单元格设置不同的width属性，保留一行中宽度最宽的属性值作为该列单元格的宽度。
水平对齐和垂直对齐的属性（其中水平对齐可以给table标签和tr标签和td标签使用，垂直对齐只能给tr标签和td标签使用）
- 给table标签设置align属性，可以控制表格在水平方向的对齐方式。
- 给tr标签设置align属性，可以控制当前行中所有单元格内容的水平方向对齐方式。
- 给td标签设置align属性，可以控制当前单元格中内容在水平方向的对齐方式（如果td标签中设置了align属性，tr中也设置了align属性，那么单元格中的内容会按照td中设置的来对齐）。
- 给tr标签设置valign属性，可以控制当前行中所有单元格内容的垂直方向对齐方式。
- 给td标签设置valign属性，可以控制当前单元格中内容在垂直方向对齐方式。（如果td标签中设置了valign属性，tr中也设置了valign属性，那么单元格中的内容会按照td中设置的来对齐。
外边距和内边距的属性（只能给table标签使用）
- 外边距（cellspacing）就是单元格和单元格之间的距离（默认情况下单元格与单元格的外边距是2px）
- 内边距（cellpadding）就是文字距离单元格之间的距离（默认情况下内边距是1px）
通过属性设置完成细线表格的绘制：
- 在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的，其实它是将2条合并为了一条线，所以看上去很不舒服。
- 细线表格的制作方式：（table标签、tr标签以及td标签都支持bgcolor属性，但是样式以后通过css完成控制。）
  1. 给table标签设置bgcolor属性
  2. 给tr标签设置bgcolor属性
  3. 给table标签设置cellspacing="1px"
- 代码：
html 复制代码
```
<table bgcolor="black" cellspacing="1px" width="500px" height="300px">
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
```
- 效果展示：
  
  通过放大比较上述两张表格图片，就能够很明显的看出表格边框的差别。

单元格合并

水平方向上的单元格合并
- 可以给td标签添加colspan属性，把某一个单元格当作多个单元格来看待（水平）。
- 格式：<td colspan="2"></td>含义：把当前单元格当作两个单元格来看待。
- 注意点：
  - 由于把某一个单元格当作多个单元格来看待，所以就会多出一些单元格，需要删掉一些单元格确保表格正常显示。
  - 单元格合并永远都是向后或者向下合并，而不能向前或者向上合并。
垂直方向上的单元格合并
- 可以给td标签添加rowspan属性，把某一个单元格当作多个单元格来看待（垂直）。
- 格式：<td rowspan="2"></td>含义：把当前单元格当作两个单元格来看待。
- 注意点：
  - 由于把某一个单元格当作多个单元格来看待，所以就会多出一些单元格，需要删掉一些单元格确保表格正常显示。
  - 单元格合并永远都是向后或者向下合并，而不能向前或者向上合并。

参考链接：

W3School官方文档：www.w3school.com.cn