HTML 表格

HTML 表格允许网页开发者将数据排列成行和列。

实例

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

亲自试一试

定义 HTML 表格

HTML 中的表格由行和列内的表格单元格组成。

实例

一个简单的 HTML 表格：

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

亲自试一试

表格单元格

每个表格单元格由 <td> 和 </td> 标签定义。

<td> 代表表格数据（table data）。

<td> 和 </td> 之间的所有内容是表格单元格的内容。

实例

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

亲自试一试

注意：表格单元格可以包含各种 HTML 元素：文本、图像、列表、链接、其他表格等。

表格行

每个表格行以 <tr> 开始，以 </tr> 结束。

<tr> 代表表格行（table row）。

实例

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

亲自试一试

一个表格中可以包含任意多行；只需确保每行的单元格数量相同即可。

注意：有时一行可能比另一行拥有更少或更多的单元格。您将在后续章节中了解这一点。

表格表头

有时您希望单元格成为表格表头单元格。在这些情况下，使用 <th> 标签代替 <td> 标签：

<th> 代表表格表头（table header）。

实例

让第一行成为表格表头单元格：

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

亲自试一试

默认情况下，<th> 元素中的文本是粗体且居中的，但您可以使用 CSS 更改此样式。

HTML 表格标签

标签	描述
<table>	定义表格。
<th>	定义表格中的表头单元格。
<tr>	定义表格中的行。
<td>	定义表格中的单元格。
<caption>	定义表格标题。
<colgroup>	指定表格中一组或多列以进行格式化。
<col>	为 <colgroup> 元素内的每一列指定列属性。
<thead>	将表格中的表头内容分组。
<tbody>	将表格中的主体内容分组。
<tfoot>	将表格中的页脚内容分组。

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。