HTML 零基础教程

HTML 创建表格

表格可以让网页以有组织和结构化的方式展示数据。

在本章节中，我们将深入学习用于创建表格的核心 HTML 标签：<table>、<tr>、<th> 和 <td>。

1. <table> 标签：你的表格容器

<table> 标签是任何 HTML 表格的基础。

  • 作用：它充当所有其他表格元素的容器，定义了表格的整体结构。
  • 比喻：把它想象成固定所有东西的框架。如果没有 <table> 标签，浏览器就不知道你试图创建一个表格。

基本示例：

<table>
</table>

这段简单的代码创建了一个空表格。你在页面上还看不到任何东西，因为它还没有包含任何行或数据。

2. <tr> 标签：定义表格行

<tr> 代表 "Table Row"（表格行）。

  • 作用：它定义了表格中的一个水平行。每一个 <tr> 标签代表一行新数据。
  • 用法：你需要将表格数据（即 <td> 或 <th> 标签）放置在 <tr> 标签内部。

示例：

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

这段代码创建了一个有两行的表格。同样，你还看不到任何可见内容，因为行里没有数据。

3. <th> 标签：定义表头

<th> 代表 "Table Header"（表头）。

  • 作用：用于定义表格的标题单元格。这些单元格通常包含列的名称，为每一列的数据提供上下文。
  • 外观：默认情况下，<th> 标签内的文字会显示为粗体并居中（当然，这可以通过 CSS 修改）。
  • 位置：<th> 标签应放在 <tr> 标签内，通常作为表格的第一行。

示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
</table>

这段代码创建了一个包含三个标题单元格的行：“姓名”、“年龄”和“职业”。这三个词将作为列标题显示。

最佳实践：始终为你的表格标题使用 <th> 标签。这不仅能提供视觉上的区分，还能极大地提高无障碍性，帮助屏幕阅读器让视障用户理解表格结构。

4. <td> 标签：定义表格数据

<td> 代表 "Table Data"（表格数据）。

  • 作用：用于定义表格内的标准数据单元格。这些单元格包含表格的实际内容，如文本、数字甚至图片。
  • 位置：像 <th> 一样，<td> 标签也必须放在 <tr> 标签内。

示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>30</td>
    <td>软件工程师</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>市场经理</td>
  </tr>
</table>

这段代码创建了一个包含标题行和两个数据行的表格。第一行数据是关于“张三”的，第二行是关于“李四”的。

重要提示：每一行中的 <td> 标签数量通常应该与标题行中的 <th> 标签数量一致。这能确保数据正确地对齐在相应的列标题下。

5. 综合示例：完整的表格

下面是一个完整的例子，演示了如何将这四个标签组合在一起，创建一个简单的商品列表：

<table>
  <tr>
    <th>产品</th>
    <th>价格</th>
    <th>数量</th>
  </tr>
  
  <tr>
    <td>笔记本电脑</td>
    <td>$1200</td>
    <td>5</td>
  </tr>
  
  <tr>
    <td>鼠标</td>
    <td>$25</td>
    <td>50</td>
  </tr>
  
  <tr>
    <td>键盘</td>
    <td>$75</td>
    <td>25</td>
  </tr>
</table>

这段代码将渲染一个包含三列（产品、价格、数量）和三行数据的表格。