第八篇、表格标签

<!-- <table></table>：定义表格，核心属性说明：
     border：设置表格边框宽度（像素）
     cellpadding：单元格内边距
     cellspacing：单元格之间的间距
     width：表格整体宽度（100%表示占满容器） -->
<table border="1" cellpadding="8" cellspacing="0" width="100%">
    <!-- <caption></caption>：定义表格标题，提升语义和可读性 -->
    <caption>2026年员工销售业绩表（含跨列/跨行）</caption>

    <!-- <colgroup></colgroup>：列组，用于统一管理列的样式 -->
    <colgroup>
        <!-- <col/>：定义单列样式，style设置列宽和背景色 -->
        <col style="width: 15%; background-color: #f0f0f0;" />
        <col style="width: 25%;" />
        <!-- <col/>的span属性：设置样式作用范围，span="2"表示该样式应用到2列（第3、4列），统一设置列宽和文字颜色 -->
        <col span="2" style="width: 20%; color: #333;" />
        <col style="width: 20%;" />
    </colgroup>

    <!-- <thead></thead>：表格表头区域，语义化区分表头和主体 -->
    <thead>
        <!-- <tr></tr>：定义表格行 -->
        <tr>
            <!-- <th></th>：表头单元格，默认加粗居中，用于列标题 -->
            <th>工号</th>
            <th>姓名</th>
            <th>部门</th>
            <th>销售额（元）</th>
            <th>排名</th>
        </tr>
    </thead>

    <!-- <tbody></tbody>：表格主体区域，存放核心数据 -->
    <tbody>
        <tr>
            <!-- <td></td>：数据单元格，存放具体数据 -->
            <td>001</td>
            <td>张三</td>
            <!-- <td></td>的rowspan属性：单元格跨行合并，rowspan="2"表示该单元格占据2行（视觉上合并2行单元格） -->
            <td rowspan="2">销售一部</td>
            <td>120000</td>
            <td>1</td>
        </tr>
        <tr>
            <td>003</td>
            <td>王五</td>
            <!-- 因上方<td></td>设置rowspan="2"，此处省略部门列，避免结构重复 -->
            <td>85000</td>
            <td>3</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>销售二部</td>
            <td>98000</td>
            <td>2</td>
        </tr>
    </tbody>

    <!-- <tfoot></tfoot>：表格表注/汇总区域，存放总计、备注等内容 -->
    <tfoot>
        <tr>
            <!-- <td></td>的colspan属性：单元格跨列合并，colspan="3"表示该单元格占据3列（视觉上合并3列单元格） -->
            <td colspan="3">总计</td>
            <td>303000</td>
            <td>—</td>
        </tr>
    </tfoot>
</table>