3-HTML表格
title: 3-HTML表格
tags: HTML（构建Web）
category: MDN
表格基础
什么是表格
表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值
表格如何工作
表格的一个特点就是严格. 通过在行和列的标题之间进行视觉关联的方法，就可以让信息能够很简单地被解读出来
表格风格
为了能够让表格在网页上有效, 你需要提供一些 CSS 的样式信息，以及尽可能好的 HTML 固定结构
什么时候不应该使用 HTML 表格
使用表格布局而不使用 CSS 布局技术 是很糟糕的. 主要的理由有以下几个:
1、表格布局减少了视觉受损的用户的可访问性: 屏幕阅读器, 被盲人所使用, 解析存在于 HTML 页面上的标签，然后为用户读出其中的内容。因为对于布局来说，表格不是一个正确的工具， 使用的标记比使用 CSS 布局技术更复杂, 所以屏幕阅读器的输出会让他们的用户感到困惑。
2、表格会产生很多标签: 正如刚才提到的, 表格布局通常会比正确的布局技术涉及更复杂的标签结构，这会导致代码变得更难于编写、维护、调试
3、表格不能自动响应: 当你使用正确的布局容器 (比如 <header>, <section>, <article>, 或是 <div>), 它们的默认宽度是父元素的 100%. 而表格的的默认大小是根据其内容而定的。因此，需要采取额外的措施来获取表格布局样式，以便有效地在各种设备上工作
使用 <th> 元素添加表头
使用 <th> 元素 (‘th’ 代表 ‘table header’)。用法和 <td>是一样的，但表示该单元格为表头
<!--
tr 表示结束一行；
th 表示该单元格为表头；
td 为普通单元格，用于存数据；
scope 属性是一个 无障碍属性，对于具体的行和列，方便屏幕阅读器读取
-->
<table>
<tr>
<td> </td>
<th scope="col">Knocky</th>
<th scope="col">Flor</th>
<th scope="col">Ella</th>
<th scope="col">Juan</th>
</tr>
<tr>
<th scope="row">Breed</th>
<td>Jack Russell</td>
<td>Poodle</td>
<td>Streetdog</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<th scope="row">Age</th>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
</table>
为什么标题是有用的
scope属性允许你让表格变得更加无障碍，每个标题与相同行或列中的所有数据相关联。屏幕阅读设备能一次读出一列或一行的数据，这是非常有帮助的
允许单元格跨越多行和列
表格中的标题和单元格有 colspan 和 rowspan 属性，这两个属性可以帮助我们实现合并 列 和 行。
<table>
<tr>
<th colspan="2">Animals</th>
</tr>
<tr>
<th colspan="2">Hippopotamus</th>
</tr>
<tr>
<th rowspan="2">Horse</th>
<td>Mare</td>
</tr>
<tr>
<td>Stallion</td>
</tr>
<tr>
<th colspan="2">Crocodile</th>
</tr>
<tr>
<th rowspan="2">Chicken</th>
<td>Hen</td>
</tr>
<tr>
<td>Rooster</td>
</tr>
</table>
为表格中的列提供共同的样式
如果你想让一列中的每个数据的样式都一样，那么你就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。你通常需要在列中的每个 <td> 或 <th> 上定义样式，或者使用一个复杂的选择器，比如 :nth-child()
而<col> 和 <colgroup> 可以定义整列数据的样式信息
<!--
我们使用了两个 <col>来定义“列的样式”，每一个<col>都会制定每列的样式，
对于第一列，我们没有采取任何样式，但是我们仍然需要添加一个空的 <col> 元素，
如果不这样做，那么我们的样式就会应用到第一列上
-->
<table>
<colgroup>
<col>
<col style="background-color: yellow">
</colgroup>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td>Orange</td>
</tr>
<tr>
<td>Robots</td>
<td>Jazz</td>
</tr>
</table>
<!--
如果你想把这种样式信息应用到每一列，我们可以只使用一个 <col> 元素，
不过需要包含 span 属性，其中的数值表示样式应用到多少列
-->
<colgroup>
<col style="background-color: yellow" span="2">
</colgroup>
表格高级特性和可访问性
使用 <caption> 为你的表格增加一个标题
表格标题一般出现在表格的上方
<!--
<caption> 接在 <table> 的下方
-->
<table>
<caption>Dinosaurs in the Jurassic period</caption>
...
</table>
添加 <thead>, <tfoot>, 和 <tbody> 结构
由于你的表格在结构上有点复杂，如果把它们定义得更加结构化，那会帮助我们更能了解结构。一个明确的方法是使用 <thead>, <tfoot>,和 <tbody> , 这些元素允许你把表格中的部分标记为表头、页脚、正文部分
这些元素不会使表格更易于屏幕阅读器用户访问，也不会造成任何视觉上的改变。然而，它们在应用样式和布局上会起到作用，可以更好地让 CSS 应用到表格上
元素细节：
1、<thead> 需要嵌套在 table 元素中，放置在头部的位置，因为它通常代表第一行，第一行中往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 <col>/<colgroup> 元素，那么 <thead>元素就需要放在它们的下面
2、<tfoot> 需要嵌套在 table 元素中，放置在底部 (页脚)的位置，一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将<tfoot>放在表格的底部，或者就放在 <thead> 的下面。(浏览器仍将它呈现在表格的底部)
3、<tbody> 需要嵌套在 table 元素中，放置在 <thead>的下面或者是 <tfoot> 的下面，这取决于你如何设计你的结构。(<tfoot>放在<thead>下面也可以生效.)
<table>
<!--
表格标题
-->
<caption>
How I chose to spend my money
</caption>
<!--
表头，第一行
-->
<thead>
<tr>
<th>Purchase</th>
<th>Location</th>
<th>Date</th>
<th>Evaluation</th>
<th>Cost (€)</th>
</tr>
</thead>
<!--
页脚，一般用来求和等
-->
<tfoot>
<tr>
<td colspan="4">SUM</td>
<td>118</td>
</tr>
</tfoot>
<!--
表格的内容
-->
<tbody>
<tr>
<td>Haircut</td>
<td>Hairdresser</td>
<td>12/09</td>
<td>Great idea</td>
<td>30</td>
</tr>
<tr>
<td>Lasagna</td>
<td>Restaurant</td>
<td>12/09</td>
<td>Regrets</td>
<td>18</td>
</tr>
<tr>
<td>Shoes</td>
<td>Shoeshop</td>
<td>13/09</td>
<td>Big regrets</td>
<td>65</td>
</tr>
<tr>
<td>Toothpaste</td>
<td>Supermarket</td>
<td>13/09</td>
<td>Good</td>
<td>5</td>
</tr>
</tbody>
</table>
嵌套表格
在一个表格中嵌套另外一个表格是可能的，只要你包含完整的结构，包括 <table> 元素。
这样通常是不建议的，因为这种做法会使标记看上去很难理解，对使用屏幕阅读的用户来说，可访问性也降低了。以及在很多情况下，也许你只需要插入额外的 单元格/行/列 到已有的表格中。
然而有时候是必要的，比如你想要从其他资源中更简单地导入内容
<table id="table1">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
</tr>
<tr>
<!--
在该单元格嵌入了一个表格
-->
<td id="nested">
<table id="table2">
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
</table>
</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
</table>
对于视力受损的用户的表格
使用列和行的标题
要使用 <th> 元素
scope 属性
列标题：
<thead>
<!--
一般第一行的就是列标题
-->
<tr>
<th scope="col">Purchase</th>
<th scope="col">Location</th>
<th scope="col">Date</th>
<th scope="col">Evaluation</th>
<th scope="col">Cost (€)</th>
</tr>
</thead>
行标题：
<!--
一般只有第一个才是行标题
-->
<tr>
<th scope="row">Haircut</th>
<td>Hairdresser</td>
<td>12/09</td>
<td>Great idea</td>
<td>30</td>
</tr>
scope属性 还有两个可选的值 ： colgroup 和 rowgroup。这些用于位于多个列或行的顶部的标题（即用于跨行和跨列的标题）
id 和标题属性
如果要替代 scope 属性，可以使用 id 和 headers 属性来创造标题与单元格之间的联系。使用方法如下:
1、为每个<th> 元素添加一个唯一的 id 。
2、为每个 <td> 元素添加一个 headers 属性。每个单元格的headers 属性需要包含它从属于的所有标题的id，之间用空格分隔开。
<thead>
<!--
为列标题定义唯一的 id
-->
<tr>
<th id="purchase">Purchase</th>
<th id="location">Location</th>
<th id="date">Date</th>
<th id="evaluation">Evaluation</th>
<th id="cost">Cost (€)</th>
</tr>
</thead>
<tbody>
<!--
同时也给行标题定义唯一的 id
-->
<!--
不过在主体内容中，headers 属性的值为 “列标题 行标题”
-->
<tr>
<th id="haircut">Haircut</th>
<td headers="location haircut">Hairdresser</td>
<td headers="date haircut">12/09</td>
<td headers="evaluation haircut">Great idea</td>
<td headers="cost haircut">30</td>
</tr>
...
</tbody>
