HTML 表格
HTML 表格允许 Web 开发者将数据排列成行和列。
示例
| Company（公司） | 联系 | 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 | 加拿大 |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
定义一个 HTML 表格
HTML 表格由行中的单元格和列组成。
示例
一个简单的 HTML 表格
<table>
<tr>
<th>公司</th>
<th>联系人</th>
<th>国家</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> 之间的所有内容是表格单元格的内容。
注意: 表格单元格可以包含各种 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 标签参考。
视频：HTML 表格
