这是我参与「第四届青训营」笔记创作活动的的第4天

1、表格结构标签

使用场景：因表格可能很大或很长，为了更好地表达语义，我们通常会将表格分割为：表格头部和表格主体两部分。

示例代码如下：

<table>
    <!--thead标签定义表格头部区域 -->
    <thead>
        <tr></tr>
        ...
    </thead>
    <!-- tbody标签定义表格主体区域 -->
    <tbody>
        ...
    </tbody>
</table>

注意：thead标签和tbody标签均位于table标签中

2、合并单元格

使用场景：特殊情况下，我们会需要将多个单元格合并为一个

（这里我们只需要掌握最简单的合并就好）

合并方式

跨行合并，格式：rowspan="合并单元格个数"
跨列合并，格式：colspan="合并单元格个数"

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

跨行：目标单元格为最上侧一行的单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

3.合并三部曲

（1）先确定是跨行合并还是跨列合并；

（2）找到目标单元格，在其标签内写上合并代码，例如：

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

（3）删除多余的单元格代码

3、表格总结

表格标签一共有哪些？

答：表格定义标签、行定义标签、单元格定义标签、表头单元格定义标签、表头区域定义标签、主体区域定义标签等。

2.表格相关属性有哪些？

答：align,border,cellpadding,cellspacing,widtn...

3.合并单元格的步骤有哪些？

答: 分为三步：

（1）先确定是跨行合并还是跨列合并；

（2）找到目标单元格，在其标签内写上合并代码，例如：

（3）删除多余的单元格代码

4、实例：小学课程表表格主体框架

1、分析

表格分为哪几部分？

答：表头，一二行包括表名，星期，，，第一列则是上下午

2、实现

（1）分析

1、表名，加上表头，2行；上午四节课，下午四节课，8行；备注，1行。

共11行

2、上下午，1列；一周7天，7列；备注，1列。

共9列

（2）实现

代码如下：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0" width="50%" height="20%">
        <!--  table_head  -->
        <thead>
            <tr>
                <th colspan="9">小学课表</th>
            </tr>
            <tr>
                <th>    </th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
                <th>周日</th>
                <th>备注</th>
            </tr>
        </thead>
       
        <!--  table_body  -->
        <tbody>
            <tr>
                <td rowspan="4">上午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>

                <td></td>
                <td></td>
                <td></td>
                <td></td>

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

                <td></td>
                <td></td>
                <td></td>
                <td></td>

            </tr>

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

                <td></td>
                <td></td>
                <td></td>
                <td></td>

            </tr>
            
            <tr>
                <td rowspan="4">下午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>

                <td></td>
                <td></td>
                <td></td>
                <td></td>

            </tr>

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

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

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

                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td>备注</td>
                <td colspan="7"></td>
            </tr>

        </tbody>

    </table>

</body>

</html>

实现效果如下：

HTML标签复习之表格标签（二） ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第4天