HTML5 （五） 表格的使用

表格标签的基本使用：

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

什么是表格标签：

表格标签是用来给一堆数据添加表格语义。

表格是一种数据的展现形式，当数据量非常大时，表格这种展示风格的形式是被认为最为清晰的一种形式。

表格标签的格式：

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

其实表格标签的table代表整个表格，也就是一对table标签是一个表格。

表格符中的tr标签代表整个表格的一行数据，也就是说一对tr标签就是表格中的一行。

一个td代表一行中的一个单元格。

注意点：

1. 表格标签有一个边框属性（border），这个属性决定了边框的宽度，默认情况下这个属性为0，所以看不到边框。
2. 表格标签和列表标签一样是一个组合标签，要不就一起出现，要不就不出现，不会单独出现。
3. 表格代码展示：

<table borader="10">
    <tr>
        <td>访问</td>
        <td>的我</td>
        <td>的鹅</td>
    </tr>
    <tr>
        <td>而无</td>
        <td>范文</td>
        <td>访问</td>
    </tr>
</table>

表格标签的基本属性：

宽度和高度（width和weight）的属性：

使用对象：可以给table标签使用，也可以和td标签使用。

• 表格的高度和宽度默认是按照 表格中的内容来调整的，也可以通过table标签来指定表格的高度和宽度。
• 如果给td设置了width属性和height属性，会修改当前单元格的宽度和高度，但不会影响整个表格的高度和宽度。

水平对齐和垂直对齐的属性：

其中水平对齐可以给table标签，tr标签和td标签使用。

垂直标签只能给tr标签和td标签使用。

水平：

• 给table标签设置align可以设置整个表格在水平方向的对齐方式。
• 给tr设置align属性来控制当前所有单元格内容的水平对齐方式。
• 给td标签设置align属性，可以控制当前单元格内容中在水平方向的对齐方式。

注意点：如果给tr标签和td标签设置了align属性，那么单元格中内容会按照td设置的对齐方式进行对齐，简言之，td的控制权限是最高的。

垂直：

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

外边距和内边距的属性：

使用对象：只能给table标签使用。

• 外边距就是单元格和单元格之间的距离，默认情况下，单元格和单元格之间的距离是2px，cellspacing。
• 内边距就是单元格的边框和文字之间的间隙，默认情况下内边距是1px，cellpadding。

表格代码展示：

<table border="10" width="300px" cellpadding="5">
    <tr>
        <td width="150px" height="100px">2.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>21.</td>
        <td>21.</td>
    </tr>
</table>

如何制作细线表格：

在表格标签中通过把外边距调设为0来实现表格细线是不靠谱的，其实它是讲俩条线he合并为一条，所以看上去同一条线是有区别的。

bgcolor属性：可以在table标签和tr标签中进行背景颜色的设置。

细线表格的设置方法：

1. 给table标签设置bgcolor属性。
2. 给tr标签设置bgcolor属性（形成俩种颜色的对比）。
3. 给table标签设置cellspaceing=“1px”。

注意点：

table标签和tr标签以及td标签都支持bgcolor属性。

表格中的 capion 标签：

• caption标签一定要写在table标签中。
• caption标签一定要紧跟在table标签中。

标题单元格标签：

什么是标题单元格标签：在表格标签中提供一个标签专门用来存储每一列的标题。

• th标签：th标签正是用来定义标题单元格。
• th标签的效果：只要定义了这种标题单元格标签，标题会自动的居中和加粗。

所以其实在table表格中存在俩种单元格，一种是td，另一种是th。td是专门用来存取数据的，th是用来存储当前列的标题的。

真正的表格ji结构：（因为在浏览器中会自动生成，所以这部分作为了解就好）

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

表格中的数据可以分为6类 ：

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

表格的完整结构：

<table>
    <caption>
        <h3>表格标题</h3>
    </caption>
    <tbody>
  	<tr>
        	<th>表格表头信息</th>
   	</tr>
  	  <tr>
  	     <td>数据</td>
   	     <td>数据</td>
        	<td>数据</td>
   	 </tr>
    </tbody>

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

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

注意点：

如果我们没有编写tbody，系统会自动帮助我们添加tbody。

如果指定了thead和tfoot，那么在修改整个表格的高度时thead和tfoot时自己的高度不会随着他们的改变而改变。

结构代码：

<table border="1" width="300px" height="300px" align="center" >
    <caption>
        <h3>学生信息</h3>
    </caption>
    <thead>
    <tr>
        <th>身高</th>
        <th>体重</th>
    </tr>
    </thead>

    <tbody>
    <tr align="center">
        <td>31</td>
        <td>32</td>
    </tr>
    <tr align="center">
        <td>13</td>
        <td>53</td>
    </tr>
    </tbody>

    <tfoot>
    <tr align="center">
        <td>23</td>
        <td>43</td>
    </tr>
    </tfoot>
</table>
-->
<table border="1" width="300px" height="300px" align="center" >
    <caption>
        <h3>学生信息</h3>
    </caption>
    <thead>
    <tr>
        <th>身高</th>
        <th>体重</th>
    </tr>
    </thead>

    <tbody>
    <tr align="center">
        <td>31</td>
        <td>32</td>
    </tr>
    <tr align="center">
        <td>13</td>
        <td>53</td>
    </tr>
    </tbody>

    <tfoot>
    <tr align="center">
        <td>23</td>
        <td>43</td>
    </tr>
    </tfoot>
</table>
</body>

单元格合并：

水平方向上的单元格合并：可以给td标签添加一个colspan属性，来指定把某个单元格当作多少个单元格来看。

例如：

<td colspan="2"></td>
含义 ：当前单元格两个单元格来看待。

垂直方向上的单元格合并：给td标签设置一个rowspan属性，来指定把某个单元格当作多个单元格来看待。

注意点：

1. 由于把一个单元格当作多个单元格来看待，所以就会多出一些其他单元格，所以要删除掉一些单元格。
2. 一定要记住单元格合并永远都是向后和向下的。