简单表格

用 table、tr、th 和 td 标签以行和列的形式呈现数据。

6 分钟 · 3 题

课程表、价目表、体育排名榜：有些信息天然就要按行和列来阅读。这正是 HTML 表格的用途。三个标签就足以入门：<table> 包裹整个表格，<tr>（table row，表格行）创建一行，而 <td>（table data，表格数据）在一行中创建一个单元格。

<table>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>0.30 euros</td>
  </tr>
</table>

要给每一列一个标题，把第一行里的 <td> 换成 <th>（table header，表头）。浏览器会把这些表头单元格显示为加粗并居中，从而让它们与数据区分开来。

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
</table>

浏览器逐行构建表格：每个 <tr> 的第一个单元格落到第一列，第二个单元格落到第二列，依此类推。默认情况下，表格显示时没有可见的边框：这是正常的——外观（线条、颜色、间距）将在之后用 CSS 来处理。

知识检测

确认你已牢记本课的重点内容。

1. 哪个标签创建表格的一行？
   • <td>
   • <tr>
   • <table>
   • <row>
2. <td> 和 <th> 有什么区别？
   • <th> 创建表头单元格，<td> 创建数据单元格
   • <th> 创建整个表格，<td> 创建一行
   • 没有区别，两者可以互换
3. HTML 表格应该用来做什么？
   • 布局整个网站
   • 以行和列的形式呈现数据
   • 替代项目符号列表