表格

某些信息是网格形式的。火车时刻表、定价计划、联赛排名、营养成分信息:每一个都有行和列,其含义在于它们如何排列。HTML 有一套专门为这类内容设计的元素,使用它们可以使网格在屏幕上和对页面进行语音阅读的软件中都保持可读性。
表格基础
**表格**是一个行和列的网格,形状与电子表格相同。你可以用四个元素来构建它。<table> 包装整个网格。每个 <tr> 是一行(tr 是 table row 的缩写)。在一行内,每个 <td> 是一个数据单元格(td 是 table data 的缩写)。当单元格标记其列或行时,你使用 <th>(th 是 table header 的缩写),浏览器会以粗体和居中的方式显示它,使其与数据区别开来。
<table>
<tr>
<th>星期</th>
<th>营业时间</th>
</tr>
<tr>
<td>星期一</td>
<td>8:00 到 18:00</td>
</tr>
<tr>
<td>星期六</td>
<td>9:00 到 14:00</td>
</tr>
</table>顶部有两个标题单元格,然后是两行数据。浏览器绘制网格,调整每列的大小以适应其内容,并以粗体呈现两个 <th> 单元格。
<table> 包装整个内容,<tr> 用于每一行,<td> 用于一个单元格,<th> 用于标题单元格。标题单元格以粗体和居中的方式显示,使其与数据区别开来。按行逐行构建,列会自动对齐。 表格结构
你的行的顺序是人们阅读它们的顺序,所以把**标题行**(由 <th> 单元格构建的那一行)放在顶部。然后保持每一行的长度相同:如果标题行有三个单元格,它下面的每个 <tr> 也需要三个 <td> 单元格。缺少单元格的行在网格中留下空隙,列就停止对齐。这里没有新东西要学,只需要小心处理你已经知道的行。
<table>
<caption>按地区分的季度收入</caption>
<thead>
<tr>
<th>地区</th>
<th>Q1</th>
<th>Q2</th>
</tr>
</thead>
<tbody>
<tr>
<th>北方</th>
<td>£12,000</td>
<td>£15,400</td>
</tr>
<tr>
<th>南方</th>
<td>£9,800</td>
<td>£11,200</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总计</th>
<td>£21,800</td>
<td>£26,600</td>
</tr>
</tfoot>
</table><th> 单元格的标题行开头。然后保持每一行的长度相同:顶部三个标题意味着下面每一行有三个 <td> 单元格。缺少的单元格是网格中的空隙,这是早期让人困惑的东西。 无障碍表格
无障碍表格是指对每个人都有意义的表格,包括用**屏幕阅读器**(为页面朗读的软件)听页面而不是看页面的人。你可以做的最有用的事情已经在你的工具箱中:对每个标题单元格使用 <th>,而不是 <td>。屏幕阅读器然后可以告诉听众哪些单元格是标签,哪些是数据,所以像"£15"这样的值与它所属的列一起被宣布。一个每个单元格都是纯 <td> 的表格读起来像一堵数字的平坦墙,没有任何东西来锚定它们。
无障碍性的范围比表格更广;无障碍章节涵盖了其余的内容。
<th>,对数据使用 <td>。屏幕阅读器依赖那个分割来读出每个值与它所属的标题一起,所以 £15 与其列一起到达,而不是单独到达。跳过它,整个表格都会当作一堵松散的数字墙。 表格用于数据,不用于布局
有一段时间,在 CSS 能处理布局之前,人们用表格构建整个页面布局:一个 <table> 在左边放菜单,在右边放内容。视觉上有效,所以你仍然在旧页面和一些电子邮件模板中看到它。不要复制它。表格用于**表格数据**,属于行和列网格的信息。排列页面的部分是 CSS 的工作。使用表格来定位东西而不是保存数据会使页面对任何使用屏幕阅读器的人更难阅读,也更难在以后调整。
<!-- 错误:使用表格来放置侧栏旁边的文章 -->
<table>
<tr>
<td><nav>...</nav></td>
<td><article>...</article></td>
</tr>
</table>
<!-- 正确:真实元素,CSS 处理列 -->
<nav>...</nav>
<article>...</article>这与什么是 HTML 中列出的结构和表示相同的分离:HTML 中的结构,CSS 中的布局。对于通过含义选择元素,请参见语义 HTML。

