10.HTML基础——表格标签

表格标签

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

1.什么是表格标签？

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

2.表格标签的格式

<table>
  <tr>
    <td>需要显示的内容</td>
  </tr>
</table>

表格标签中的table标签代表整个表格，也就是一对table标签就是一个表格；
表格标签中的tr标签代表整个表格中的一行数据，也就是一对tr标签就是表格中的一行；
表格标签中的td标签代表表格一行中的一个单元格，也就是说一对td标签就是一行中的一个单元格。

例如：要求写一个表格，这个表格有两行三列

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

3.注意点

1. 表格标签有一个边框属性border，这个属性决定了边框的宽度，默认情况下这个属性的值为0，所以看不到边框；
2. 表格标签和列表标签一样，是一个组合标签，所以table/tr/td标签要么一起出现，要么一起不出现，不会单独出现。

*4.表格标签的属性（了解）

（1）宽度和高度的属性

可以给table标签和td标签使用。

1. 表格的宽度和高度默认是按照内容的尺寸来调整的，也可以通过给table标签设置width/height属性的值来手动指定表格的宽度和高度；
2. 如果给tr标签设置width/height属性，会修改当前单元格的宽度和高度，不会影响整个表格的宽度和高度。

（2）水平对齐和垂直对齐的属性

其中水平对齐可以给table标签、tr标签和td标签使用，垂直对齐只能给tr标签和td标签使用。

水平方向：

1. 给table标签设置align属性，可以控制表格在水平方向的对齐方式；
2. 给tr标签设置align属性，可以控制当前行中所有
   单元格内容的水平方向的对齐方式；
3. 给td标签设置align属性，可以控制当前单元格中内容在水平方向的对齐方式
   **注意点：**如果td标签中设置了align属性，tr标签中也设置了align属性，那么单元格中的内容会按照td标签中设置的来对齐。

垂直方向：

1. 给tr标签设置valign属性，可以控制当前行中所有单元格中的内容在垂直方向的对齐方式；
2. 给td标签设置valign属性，可以控制当前单元格中的内容在垂直方向的对齐方式。

**注意点：**如果td标签中设置了valign属性，tr标签中也设置了valign属性，那么单元格中的内容会按照td标签中设置的来对齐。

（3）外边距和内边距的属性

只能给table标签使用。
外边距：
外边距就是单元格和单元格之间的距离。
默认情况下，外边距就是2。
内边距：
内边距就是单元格的边框和内容之间的距离。
默认情况下，内边距就是1。

注意：以上内容在企业开发中不被推荐使用，所有控制样式的都是通过css。

*5.细线表格（了解）

在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的，其实它是将2条线合并为一条线，看起来很不舒服。
细线表格的制作方式：
1.给table标签设置bgcolor=“black”
2.给tr标签设置bgcolor=“white”
3.给table标签设置cellspacing=“1px”

<table bgcolor="black" cellspacing="1px">
  <tr bgcolor="white">
    <td>1.1</td>
    <td>1.2</td>
  </tr>
  <tr bgcolor="white">
    <td>2.1</td>
    <td>2.2</td>
  </tr>
</table>

注意点：table标签和tr标签以及td标签都支持bgcolor属性，但是以上内容在企业开发中不被推荐使用，所有控制样式的都是通过css。

6.表格标签中的其他标签

（1）caption标签

标题标签
在表格标签中提供了一个专门用来设置表格标题的标签，叫做caption标签。只要将标题写在caption标签中，那么标签就会自动相对于表格的宽度居中。
注意点：

1. caption标签一定要写在table标签中，否则无效；
2. caption标签一定要紧跟在table标签后面。

（2）th标签

标题单元格标签
在表格标签中提供了一个专门用来存储每一列标题的标签，叫做th标签，只要将当前列的标题存储在这个标签中就会自动居中和自动加粗文字。
我们发现其实表格中有两种单元格，一种是td，一种是th。td是用来存储数据的，th是专门用来存储当前列的标题的。

*7.表格标签

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

表格中存储的数据可以分为四类：

1. 表格的标题
2. 表格的表头信息
3. 表格的主体信息
4. 表格的页尾信息

• 表格的完整结构

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

caption作用：指定表格的标题
thead作用：指定表格的表头信息
tbody作用：指定表格的主体信息
tfoot作用：指定表格的附加信息

• 注意点：

1. 如果我们没有编写tbody，浏览器会自动给我们添加tbody；
2. 如果指定了thead和tfoot，那么在修改整个表格的高度和宽度时，thead和tfoot有自己默认的高度，不会随着表格的高度变化而变化。

8.单元格合并

（1）水平方向上的单元格合并

可以给td标签添加一个colspan属性，把某一个单元格当做多个单元格来看待（水平方向）
例如：

<td colspan="2"></td>

含义：把当前单元格当做两个单元格来看待

（2）垂直方向上的单元格合并

可以给td标签添加一个rowspan属性，把某一个单元格当做多个单元格来看待（垂直方向）

<tr bgcolor="white">
    <td rowspan="2"></td>
    <td></td>
    <td></td>
  </tr>
  <tr bgcolor="white">
<!--<td></td>-->
    <td></td>
    <td></td>
  </tr>