表格

表格用于展示二维结构化数据，如数据报表、信息列表等。

基础表格结构

基本语法

HTML

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>上海</td>
    </tr>
</table>

核心标签

标签	说明
`<table>`	表格容器
`<tr>`	表格行
`<th>`	表头单元格（加粗居中）
`<td>`	数据单元格

语义化表格结构

完整结构

HTML

<table>
    <caption>员工信息表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>部门</th>
            <th>薪资</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>技术部</td>
            <td>15000</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>市场部</td>
            <td>12000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合计</td>
            <td>2人</td>
            <td>27000</td>
        </tr>
    </tfoot>
</table>

语义化标签

标签	说明
`<caption>`	表格标题
`<thead>`	表头区域
`<tbody>`	表体区域
`<tfoot>`	表尾区域

单元格合并

跨列合并（colspan）

HTML

<table>
    <tr>
        <th colspan="3">学生信息</th>
    </tr>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>成绩</td>
    </tr>
</table>

跨行合并（rowspan）

HTML

<table>
    <tr>
        <td rowspan="2">张三</td>
        <td>语文：90</td>
    </tr>
    <tr>
        <td>数学：95</td>
    </tr>
</table>

合并示例

HTML

<table>
    <tr>
        <th colspan="2">上午</th>
        <th colspan="2">下午</th>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>体育</td>
    </tr>
</table>

表格属性

th/td属性

属性	说明
`colspan`	跨列数
`rowspan`	跨行数
`scope`	表头范围：col/row/colgroup/rowgroup

scope用法

HTML

<table>
    <tr>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
    </tr>
    <tr>
        <th scope="row">张三</th>
        <td>25</td>
    </tr>
</table>

表格样式建议

CSS常用样式

CSS

table {
    border-collapse: collapse;  /* 合并边框 */
    width: 100%;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f5f5f5;
}

/* 条纹表格 */
tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

嵌套表格

HTML

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>嵌套内容</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

嵌套表格会增加复杂度，建议谨慎使用。

要点总结

语义结构：使用thead/tbody/tfoot增强语义
caption标题：添加表格标题提升可访问性
合并正确：合并后删除多余单元格
边框合并：使用border-collapse: collapse

📝 发现内容有误？点击此处直接编辑