HTML 表格
HTML 表格允许 Web 开发人员将数据排列成行和列。
示例
| 公司 | 联系人 | 国家 |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | 德国 |
| Centro comercial Moctezuma | Francisco Chang | 墨西哥 |
| Ernst Handel | Roland Mendel | 奥地利 |
| Island Trading | Helen Bennett | 英国 |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | 加拿大 |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | 意大利 |
定义 HTML 表格
HTML 中的表格由行和列中的表格单元格组成。
示例
一个简单的 HTML 表格
<table>
<tr>
<th>公司</th>
<th>联系人</th>
<th>国家</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>德国</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>墨西哥</td>
</tr>
</table>
自己试试 »
表格单元格
每个表格单元格由一个 <td> 和一个 </td> 标签定义。
td 代表表格数据。
<td> 和 </td> 之间的所有内容都是表格单元格的内容。
注意: 表格单元格可以包含各种 HTML 元素：文本、图像、列表、链接、其他表格等。
表格行
每个表格行以一个 <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> 标签代替 <td> 标签
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 更改它。
HTML 表格标签
| 标签 | 描述 |
|---|---|
| <table> | <table> |
| 定义表格 | <th> |
| 定义表格中的标题单元格 | <tr> |
| 定义表格中的行 | <td> |
| 定义表格中的单元格 | <caption> |
| 定义表格标题 | <colgroup> |
| 指定表格中一列或多列的组用于格式化 | <col> |
| 指定 <colgroup> 元素中每列的列属性 | <thead> |
| 将表格中的标题内容分组 | <tbody> |
| 将表格中的正文内容分组 | <tfoot> |
将表格中的页脚内容分组
有关所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。
