6. 表格标签

6.1 表格的主要作用

表格主要==用于显示、展示数据，==因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就湿得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

总结：表格不是用来布局页面的，而是用来展示数据的.

6.2 表格的基本语法

<table>
    <tr><th>第1列表头</th> <th>第2列表头</th>...</tr>
    <tr><td>第1行第1列单元格</td> <td>第1行第2列单元格</td>...</tr>
    <tr><td>第2行第1列单元格</td> <td>第2行第2列单元格</td>...</tr>
    <tr><td>第3行第1列单元格</td> <td>第3行第2列单元格</td>...</tr>
    ...
</table>

1. <th></th>是用于表头单元格标签 , 加粗居中 , table head缩写;
2. <table></table>是用于定义表格的标签;
3. <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中;
4. <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中;
5. 字母td指表格数据(table data), 数据即数据单元格的内容;

6.3 表格的属性

表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置.

此处学习表格属性目的有2个：

1. 记住这些英语单词，后面CSS会使用.
2. 直观感受表格的外观形态

属性名	属性值	描述
align	left center right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为"，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

注:

1. cellspacing 通常设置为0 , 这样单元格之间不会有间隙
2. 通常只设置宽或者 , 会按照等比例缩放

6.4 表格结构标签

使用场景：因为表格可能很长为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分：

在表格标签中，分别用：<thead></thead>标签表格的头部区域、<tbody></tbody>标签表格的庄体区域。这样可以更好的分清表格结构。

<table>
<thead>
    <tr><th>第1列表头</th> <th>第2列表头</th>...</tr>
</thead>
<tbody>
    <tr><td>第1行第1列单元格</td> <td>第1行第2列单元格</td>...</tr>
    <tr><td>第2行第1列单元格</td> <td>第2行第2列单元格</td>...</tr>
    <tr><td>第3行第1列单元格</td> <td>第3行第2列单元格</td>...</tr>
    ...
</tbody>
</table>

6.5 合并单元格

合并单元格的方式

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

• 跨列合并：colspan="合并单元格的个数’’

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fVVcHgiA-1654879047782)(E:\Typora\image-20220610231122728.png)]

目标单元格：（写合并代码）

• 跨行：最上侧单元格为目标单元格，写合并代码

• 跨列：最左侧单元格为目标单元格，写合并代码

合并单元格步骤：

1. 先确定是跨行还是跨列合并。
2. 找到目标单元格 , 写上合并方式=合并的单元格数量。比如：<td colspan="2"><td>。
3. 删除多余的单元格。

<table align="center" border="1" cellspacing="0" width="300">
    <thead>
        <tr>
            <th colspan="3">学生成绩表</th>  <!--按列合并3列-->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>姓名</td>
            <td>学科</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td rowspan="3">小明</td>  <!--按行合并3行-->
            <td>语文</td>
            <td>98</td>
        </tr>
        <tr>
            <!-- 由于被合并所以第一列直接跳过 -->
            <td>数学</td>
            <td>96</td>
        </tr>
        <tr>
            <!-- 由于被合并所以第一列直接跳过 -->
            <td>英语</td>
            <td>100</td>
        </tr>
    </tbody>
</table>