HTML 初学者指南 - 第 5 课 - 表格

10/10/2025, by Ivan

表格是信息存储的重要形式之一。像 Excel、Access 等数据库都是以表格的形式来存储信息。表格能够直观地展示数据，并且这些数据很方便用于绘制图表和统计图。在本课中，我们将学习如何在 HTML 中创建表格。为此，我们会使用以下标签：<table>、<tr>、<td>、<th>、<thead>、<tbody>、<tfoot>。

标签 table

TABLE 是表格的主标签，其他表格相关的标签都放在它的内部。

<table>
</table>

所有其他的表格标签都要写在这个标签内部。

标签 tr

TR 表示表格的一行。每一行都用 <tr></tr> 包裹。如果我们想创建三行表格，那么就需要三对这样的标签：

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

标签 td

TD 表示表格中的一个单元格。每个单元格都必须放在行标签 <tr> 内。为了让表格显示正常，每一行的单元格数量应相同。下面我们创建一个每行有四个单元格的表格：

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

接下来，我们为表格添加内容：

<table>
  <tr>
    <td>编号</td>
    <td>姓氏</td>
    <td>名字</td>
    <td>父名</td>
  </tr>
  <tr>
    <td>1</td>
    <td>伊万诺夫</td>
    <td>伊万</td>
    <td>伊万诺维奇</td>
  </tr>
  <tr>
    <td>2</td>
    <td>彼得罗夫</td>
    <td>彼得</td>
    <td>彼得罗维奇</td>
  </tr>
</table>

现在我们可以让表格更具结构化意义，将其分为三个部分：thead — 表头，tbody — 主体内容，tfoot — 表格底部。

标签 tbody

TBODY 不是必须的，但它可以用来明确指出表格的主要内容部分：

<table>
  <tbody>
    <tr>
      <td>编号</td>
      <td>姓氏</td>
      <td>名字</td>
      <td>父名</td>
    </tr>
    <tr>
      <td>1</td>
      <td>伊万诺夫</td>
      <td>伊万</td>
      <td>伊万诺维奇</td>
    </tr>
    <tr>
      <td>2</td>
      <td>彼得罗夫</td>
      <td>彼得</td>
      <td>彼得罗维奇</td>
    </tr>
  </tbody>
</table>

标签 thead

THEAD 用于定义表格的表头。让我们把第一行放入 thead 中：

<table>
  <thead>
    <tr>
      <td>编号</td>
      <td>姓氏</td>
      <td>名字</td>
      <td>父名</td>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>伊万诺夫</td>
      <td>伊万</td>
      <td>伊万诺维奇</td>
    </tr>
    <tr>
      <td>2</td>
      <td>彼得罗夫</td>
      <td>彼得</td>
      <td>彼得罗维奇</td>
    </tr>
  </tbody>
</table>

现在我们可以将表头中的单元格标签 td 改为 th，表示这些是列标题：

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓氏</th>
      <th>名字</th>
      <th>父名</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>伊万诺夫</td>
      <td>伊万</td>
      <td>伊万诺维奇</td>
    </tr>
    <tr>
      <td>2</td>
      <td>彼得罗夫</td>
      <td>彼得</td>
      <td>彼得罗维奇</td>
    </tr>
  </tbody>
</table>

在现代浏览器中，表头单元格 th 通常会默认以粗体显示。最后我们还剩下表格的底部标签 tfoot。

标签 tfoot

TFOOT 用于定义表格底部的说明或总结内容。

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓氏</th>
      <th>名字</th>
      <th>父名</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>伊万诺夫</td>
      <td>伊万</td>
      <td>伊万诺维奇</td>
    </tr>
    <tr>
      <td>2</td>
      <td>彼得罗夫</td>
      <td>彼得</td>
      <td>彼得罗维奇</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>创建表格于 2012 年</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

属性 colspan

colspan 是 td 标签的重要属性之一，它允许我们合并单元格。让我们来看一下刚才的表格底部（tfoot）。我们有 4 个单元格，但只在第一个中写了内容，因此可以使用 colspan 将它们合并：

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓氏</th>
      <th>名字</th>
      <th>父名</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>伊万诺夫</td>
      <td>伊万</td>
      <td>伊万诺维奇</td>
    </tr>
    <tr>
      <td>2</td>
      <td>彼得罗夫</td>
      <td>彼得</td>
      <td>彼得罗维奇</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">创建表格于 2012 年</td>
    </tr>
  </tfoot>
</table>

现在我们得到一个宽度等于 4 个单元格的合并单元格。colspan 属性的值表示要合并的单元格数量。

Palette - Make it Colorful🎨