HTML 表格

category: HTML / CSS

HTML 表格允许 Web 开发人员将数据排列成行和列。

例子

定义 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 代表表数据。 <td>和之间的所有内容</td>都是表格单元格的内容。

例子

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

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

表行

每个表行以 a 开头 <tr>并以标签结尾</tr>。 tr 代表表格行。

例子

<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>tag 而不是 <td>tag： th 代表表头。

例子

令第一行为表格标题单元格：

<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 更改它。