HTML 零基础教程：HTML 表格 (<table>) 详解

在网页设计中，表格 (<table>) 不仅仅用于布局（这是 CSS 的工作），它的核心职责是展示结构化的、二维的数据，例如财务报表、产品对比、课程表等。

本教程将带您掌握创建 HTML 表格所需的所有核心标签和属性。

一、 表格的核心结构标签

一个完整的 HTML 表格由以下几个基本元素组成，它们像积木一样构建出表格的行和列。

1. 容器：<table>

这是定义整个表格的根元素。所有表格内容都必须放在这个标签内部。

2. 表格行：<tr>

<tr> (Table Row) 标签定义了表格中的一行。您有多少行数据，就需要多少个 <tr> 标签。

3. 单元格：<td> 和 <th>

单元格是表格的最小单位。

• <td> (Table Data)： 定义表格中的标准数据单元格。

• <th> (Table Header)： 定义表格中的表头单元格。通常浏览器会默认将 <th> 中的文本居中并加粗显示，用于表示该列或该行的标题。

二、 表格结构划分（语义化）

为了让浏览器和屏幕阅读器更好地理解表格的结构，HTML 推荐将表格划分为头部、主体和底部。

1. 表格头部：<thead>

包含表格的列标题。它必须包含一行或多行 <tr> 元素。

2. 表格主体：<tbody>

包含表格的核心数据内容。可以包含多行 <tr> 元素。

3. 表格底部：<tfoot>

包含表格的汇总或脚注信息（例如总计、平均值）。它必须包含一行或多行 <tr> 元素。

💡 最佳实践： 始终使用 <thead>、<tbody> 和 <tfoot> 来组织您的表格，即使表格很简单。

三、 完整表格的示例代码

下面的代码展示了一个标准、语义化良好的表格结构：

<table>
    <caption>2025 年 Q1 销售报告</caption>

    <thead>
        <tr>
            <th>月份</th>
            <th>销售额 (万元)</th>
            <th>同比增长</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>一月</td>
            <td>500</td>
            <td>15%</td>
        </tr>
        <tr>
            <td>二月</td>
            <td>620</td>
            <td>10%</td>
        </tr>
        <tr>
            <td>三月</td>
            <td>750</td>
            <td>18%</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Q1 总计</td>
            <td>1870</td>
            <td>-</td>
        </tr>
    </tfoot>
</table>

四、 核心高级属性：跨行与跨列

在复杂的表格中，您可能需要将一个单元格扩展到多行或多列，这需要使用两个核心属性：

1. 跨列：colspan

允许单元格横向占据多列空间。属性值是需要跨越的列数。

• 示例： colspan="3" 表示该单元格将横向合并三列。

2. 跨行：rowspan

允许单元格纵向占据多行空间。属性值是需要跨越的行数。

• 示例： rowspan="2" 表示该单元格将纵向合并两行。

跨行跨列示例

<table>
    <thead>
        <tr>
            <th colspan="2">产品信息 (合并两列)</th> 
            <th>库存</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">A 类产品 (跨两行)</td> 
            <td>型号 A1</td>
            <td>150</td>
        </tr>
        <tr>
            <td>型号 A2</td>
            <td>80</td>
        </tr>
    </tbody>
</table>

总结与表格样式

• 结构优先： 使用 <thead>、<tbody>、<tfoot> 让表格结构清晰。

• 标题： 使用 <th> 定义表头，使用 <caption> 定义整个表格的标题。