课时13：表格分区结构¶

学习目标：掌握表格分区标签（caption、thead、tbody）的语义用法，能够构建带有标题、表头和主体的完整数据表格。

一、表格分区概念¶

1.1 完整表格的组成部分¶

一个语义完整的表格应包含三个逻辑分区：

分区	标签	语义	内部嵌套
表格标题	`<caption>`	描述表格的主题或数据来源	文本内容（只能有一个）
表格头部	`<thead>`	定义表头区域	`<tr>` + `<th>`
表格主体	`<tbody>`	定义数据主体区域	`<tr>` + `<td>`

1.2 分区化优势¶

语义清晰：明确区分标题、表头和数据区域，便于屏幕阅读器理解
样式控制：可针对 thead、tbody 分别设置 CSS 样式（如表头固定、主体滚动）
打印优化：浏览器打印时可设置每页重复显示表头
脚本操作：JavaScript 可独立操作 tbody 中的数据行（如排序、筛选）

二、分区标签详解¶

2.1 `<caption>` 表格标题¶

<table>
    <caption>2023年度各地区资产投资情况统计表</caption>
    <!-- thead 和 tbody -->
</table>

规范： - 每个 <table> 内部最多只有一个 <caption> - 必须作为 <table> 的第一个子元素 - 浏览器默认将标题显示在表格上方居中位置

2.2 `<thead>` 表格头部¶

<thead>
    <tr>
        <th>地区</th>
        <th>按总量分</th>
        <th>按比重分</th>
    </tr>
</thead>

规范： - 内部只能嵌套 <tr> 行 - 行内通常使用 <th> 而非 <td>，以体现表头语义

2.3 `<tbody>` 表格主体¶

<tbody>
    <tr>
        <td>全国</td>
        <td>10000</td>
        <td>100%</td>
    </tr>
    <tr>
        <td>北京</td>
        <td>2000</td>
        <td>20%</td>
    </tr>
</tbody>

规范： - 内部只能嵌套 <tr> 行 - 行内使用 <td> 存放数据 - 可包含多个 <tbody> 实现数据分组（不常见）

三、综合案例：构建分区表格¶

3.1 案例背景¶

构建一个名为"各地区资产投资情况"的统计表格，包含： - 双层表头（第一行跨列合并，第二行细分） - 多行数据

3.2 完整代码结构¶

<table border="1" style="border-collapse: collapse;">
    <caption>各地区资产投资情况</caption>

    <thead>
        <!-- 第一行：跨列表头 -->
        <tr>
            <th rowspan="2">地区</th>       <!-- 跨2行 -->
            <th colspan="2">按总量分</th>    <!-- 跨2列 -->
            <th colspan="2">按比重分</th>    <!-- 跨2列 -->
        </tr>
        <!-- 第二行：细分表头 -->
        <tr>
            <th>自年初累计（元）</th>
            <th>去年同期增长</th>
            <th>去年自年初累计</th>
            <th>去年同期</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>全国</td>
            <td>50000</td>
            <td>9.8%</td>
            <td>100%</td>
            <td>100%</td>
        </tr>
        <tr>
            <td>北京</td>
            <td>8000</td>
            <td>8.5%</td>
            <td>16%</td>
            <td>15.8%</td>
        </tr>
        <!-- 更多数据行... -->
    </tbody>
</table>

3.3 结构分析¶

表头第一行： - "地区" 设置 rowspan="2"，纵向跨越两行，对应左侧垂直标题 - "按总量分" 设置 colspan="2"，横向跨越两列，对应下方两个细分表头 - "按比重分" 设置 colspan="2"，同上

表头第二行： - 包含四个具体的细分表头（自年初累计、去年同期增长、去年自年初累计、去年同期） - 注意：由于第一行已占用了左侧"地区"的位置，本行只需写四个 <th>

主体区域： - 每行五列数据，与表头列数对应 - 数据内容按实际统计值填充

四、样式优化建议¶

4.1 基础尺寸调整¶

table {
    border-collapse: collapse;
}

td, th {
    width: 100px;
    padding: 8px;
    text-align: center;
    border: 1px solid #333;
}

caption {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
}

4.2 表头样式突出¶

thead {
    background-color: #f0f0f0;
}

th {
    font-weight: bold;
}