HTML 表格

提示

1. HTML表格基本结构：使用<table>标签创建表格，表格内部包含行<tr>，行内部包含表格数据<td>和表格标题<th>。
2. 表格附加标签和功能：可以使用<thead>、<tbody>、<tfoot>标签分别定义表格的头部、主体和尾部，以及使用colspan和rowspan属性合并多个单元格。
3. 表格的其他特性：表格可以包含<caption>作为标题，可以同时使用colspan和rowspan进行更复杂的布局，以及使用<th>创建垂直表头。

HTML 表格标签（<table>）用于通过创建表格来以结构化方式表示数据。例如，

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>国家</th>
  </tr>
  <tr>
    <td>Harry Depp</td>
    <td>28</td>
    <td>英国</td>
  </tr>
  <tr>
    <td>John Smith</td>
    <td>35</td>
    <td>美国</td>
  </tr>
  <tr>
    <td>Ram Krishna</td>
    <td>19</td>
    <td>尼泊尔</td>
  </tr>
</table>

浏览器输出

在上面的示例中，您可以看到我们使用了多个标签来在 HTML 中创建表格。

• <table>
• <tr>
• <td>
• <th>

HTML 中的表格标签 <table>

<table> 标签用于定义表格。例如，

<table>
  ….
  <table></table>
</table>

HTML 中的表格行 <tr>

<tr> 标签用于定义表格中的一行。例如，

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

表格行可以包含表格标题 <th> 或表格数据 <td>。

<tr>
  <th>姓名</th>
  <th>国家</th>
</tr>
<tr>
  <td>Prasanna</td>
  <td>尼泊尔</td>
</tr>
<tr>
  <td>Simon</td>
  <td>美国</td>
</tr>

在表格中，可以有任意数量的行。

HTML 中的表格标题 <th>

<th> 标签用于定义表格表头。它通常是表格的顶部行。例如，

<table>
  <tr>
    <th>物品</th>
    <th>数量</th>
  </tr>
  <tr>
    <td>芒果</td>
    <td>125</td>
  </tr>
  <tr>
    <td>橙子</td>
    <td>75</td>
  </tr>
</table>

浏览器输出

在上述示例中，Item 和 Count 是表格标题，它们用于表示特定行中的数据类别。

这里，表格标题的样式是加粗和居中对齐的。这是因为 <th> 标签有一些默认的样式设置。

HTML 中的表格单元格 <td>

<td> 标签用于定义表格单元（数据）。表格单元格用于存储要在表格中显示的数据。例如，

<tr>
  <td>苹果</td>
  <td>芒果</td>
  <td>橙子</td>
</tr>

在上述示例中，<td>苹果</td>、<td>芒果</td> 和 <td>橙子</td> 是表格单元格。

表格单元格通常位于表格行或表格标题内。

表格边框

请记住，我们在第一个示例中使用了边框属性。

<table border="1">
  ...
</table>

在 HTML 中，border 属性用于为表格及其所有单元格添加边框。

注意： 我们可以在表格中使用各种样式的边框，但要实现更具体的边框样式，需要使用 CSS。

为了防止像上面示例中那样的双重边框，我们可以设置表格的 border-collapse 属性。例如，

<table border="1" style="border-collapse: collapse;">
  ...
</table>

表格头、主体和尾部

HTML 表格可以分为三部分：头部、主体和尾部。

1. 表格头部

我们使用 <thead> 标签添加表格头部。<thead> 标签必须在表格内的其他任何标签之前。例如，

<table>
  <thead>
    <tr>
      <th>序号</th>
      <th>物品</th>
    </tr>
  </thead>

  ... ...
</table>

<thead> 的内容放置在表格的顶部，我们通常将带有表格标题的行放在 <thead> 标签内。

2. 表格主体

我们使用 <tbody> 标签添加表格主体。<tbody> 标签必须在 <thead> 之后并且在表格内的其他任何标签之前。例如，

<table>
  <thead>
    ...
  </thead>
  <tbody>
    <tr>
      <td>单元格 1</td>
      <td>单元格 2</td>
    </tr>
  </tbody>

  ... ...
</table>

<tbody> 的内容放置在表格的中心部分，我们通常将要表示的内容行放在 <tbody> 内。

3. 表格尾部

我们使用 <tfoot> 标签添加表格尾部。<tfoot> 标签必须在 <tbody> 之后并且在表格内的其他任何标签之前。例如，

<table>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    <tr>
      <td>尾部 1</td>
      <td>尾部 2</td>
    </tr>
  </tfoot>
</table>

<tfoot> 的内容放置在表格的底部，我们通常将带有尾部的行放在 <tfoot> 内。

所有这些标签必须放置在 <table> 标签内，并且必须包含至少一个 <tr>。例如，

示例：带有头部、主体和尾部的 HTML 表格

<table>
  <thead>
    <tr>
      <th>序号</th>
      <th>物品</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>苹果</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
      <td>芒果</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>橙子</td>
      <td>1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>总计</td>
      <td>5</td>
    </tr>
  </tfoot>
</table>

浏览器输出

跨列和跨行

跨列（Colspan）

colspan 属性用于合并跨越多个列的单元格。例如，

<table>
  <tr>
    <th>序号</th>
    <th>物品</th>
    <th>数量</th>
  </tr>
  <tr>
    <td>1</td>
    <td>苹果</td>
    <td>2</td>
  </tr>
  <tr>
    <td>2</td>
    <td>芒果</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>橙子</td>
    <td>1</td>
  </tr>
  <tr>
    <td colspan="2">总计</td>
    <td>5</td>
  </tr>
</table>

浏览器输出

在上述示例中，你可以看到最后一行只有 2 个单元格，其中一个单元格占据了 2 列。

colspan 属性的值决定单元格占据的列数。

跨行（Rowspan）

rowspan 属性用于合并跨越多个行的单元格。例如，

<table>
  <tr>
    <th>姓名</th>
    <th>科目</th>
    <th>分数</th>
  </tr>
  <tr>
    <td rowspan="3">Mark Smith</td>
    <td>英语</td>
    <td>67</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>82</td>
  </tr>
  <tr>
    <td>科学</td>
    <td>91</td>
  </tr>
</table>

浏览器输出

在上述示例中，你可以看到第一列只有 2 个单元格，其中一个单元格占据 2 行。

rowspan 属性的值决定单元格占据的行数。

关于 HTML 表格你需要知道的事情

我们可以同时使用 colspan 和 rowspan 吗？

是的，我们可以同时使用 colspan 和 rowspan 来创建占据多行和多列的单元格。这里有一个示例：

垂直表头

在这个教程中，我们已经多次看到在顶部行中使用的表头 <th>。但我们也可以在列中添加 <th> 标签来创建垂直表头。例如，

<table>
  <tr>
    <th>姓名</th>
    <td>Sam</td>
    <td>Steve</td>
    <td>Peggy</td>
  </tr>
  <tr>
    <th>年龄</th>
    <td>31</td>
    <td>42</td>
    <td>29</td>
  </tr>
  <tr>
    <th>性别</th>
    <td>男</td>
    <td>男</td>
    <td>女</td>
  </tr>
</table>

浏览器输出

HTML 表格中的标题

<caption> 元素作为表格的标题。它用于提供表格的简短描述。它显示在表格的顶部。

<caption> 标签必须是 <table> 元素的第一个子元素。

<table>
  <caption>
    员工详情
  </caption>
  <tr>
    <th>姓名</th>
    <td>Sam</td>
    <td>Steve</td>
    <td>Peggy</td>
  </tr>
  <tr>
    <th>年龄</th>
    <td>31</td>
    <td>42</td>
    <td>29</td>
  </tr>
  <tr>
    <th>性别</th>
    <td>男</td>
    <td>男</td>
    <td>女</td>
  </tr>
</table>