table
用于以网格的形式显示二维数据。在HTML的早期版本中，用表格空格页面布局的现象很常见。现在已经不再允许这样做，取而代之的是新增的CSS表格特征。
[TOC]
元素一览
| 元素 | 说明 | 类型 | 新增或有无变化 |
|---|---|---|---|
| table | 表格 | 流 | 有变化 |
| caption | 标题 | 无 | 有变化 |
| thead | 标题行 | 无 | 有变化 |
| th | 表格 | 无 | 有变化 |
| tbody | 表主体 | 无 | 有变化 |
| tfoot | 表脚 | 无 | 有变化 |
| tr | 一行 | 无 | 有变化 |
| col | 一列 | 无 | 有变化 |
| colgroup | 一组列 | 无 | 有变化 |
| td | 单元格 | 无 | 有变化 |
创建一个表格，table、tr、td是必须有的。table是HTML支持表格式布局的核心元素。
table 标签到 td 标签之间不能插入非表格元素。否则会莫名其妙的消失了，其实是被浏览器过滤掉了。
table 表格
| 元素 | table |
|---|---|
| 元素类型 | 流 |
| 父元素 | 任何可以包含流的元素 |
| 局部属性 | border |
| 内容 | 以上表格内元素 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | summary、align、width、bgcolor、cellpadding、cellspacing、frame和rules属性已不再使用，其功能由css实现，border 属性的值必须设置为1。表格边框的粗细必须用CSS控制。 |
| 默认样式 | table {display: block; border-collapse: separate; border-spacing: 2px; border-color: gray; } |
- border 使用设个属性用来告诉浏览器，这个表格是用来表示表格式数据，而不是用来布局的。大多数浏览器见到这个属性时，都会在表格和每个单元格周围绘制出边框。其值必须为1或空字符串“”。改属性并不控制样式，那是css的工作。
tr 行 td 列
HTML基于行而不是列，每个行必须分别标记。
| 元素 | tr |
|---|---|
| 元素类型 | 无 |
| 父元素 | table、thead、tfoot、tbody |
| 局部属性 | 无 |
| 内容 | 一个或多个td或th元素。 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | align、char、charoff、valign和bgcolor属性已不再使用，其功能由css实现。 |
| 默认样式 | tr {display: table-row; vertical-align: inherit; border-color: inherit; } |
| 元素 | td 单元格 |
|---|---|
| 元素类型 | 无 |
| 父元素 | tr |
| 局部属性 | colspan、rowspan、headers |
| 内容 | 流内容。 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | 其余属性已不再使用 |
| 默认样式 | td {display: table-cell; vertical-align: inherit; } |
有了三个核心元素，就能组装出表格。
但是为了让表格内容根据语义化，常需要以下的元素
th 表头单元格
| 元素 | td 单元格 |
|---|---|
| 元素类型 | 无 |
| 父元素 | tr |
| 局部属性 | colspan、rowspan、headers |
| 内容 | 短语内容 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | 其余属性已不再使用 |
| 默认样式 | td {display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; } |
td,th都有header属性，header属性值可以设置为一个或多个表头th的id属性值，用于说明该单元格关联到某行某列。它可以供屏幕阅读器和其它残障辅助技术用来简化对表格的处理。
划分表格内容
结构化的数据不仅设置语义清晰，设置样式也变得灵活，而且根据结构添加的样式不会因为添加数据和减少数据而变得错乱。
表格可以细分为表主体、表头、表脚。表主体是包含数据的地方。
tbody表主体
| 元素 | tbody, thead, tfoot |
|---|---|
| 元素类型 | 无 |
| 父元素 | table |
| 局部属性 | 无 |
| 内容 | 零个或多个tr元素 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | 原有属性都被废弃. tfoot 现在出现在 tbody，tr前后都可以。 |
| 默认样式 | tbody {display: table-row-group; vertical-align: middle; border-color: inherit; } |
| 默认样式 | thead {display: table-header-group; vertical-align: middle; border-color: inherit; } |
| 默认样式 | tfoot {display: table-footer-group; vertical-align: middle; border-color: inherit; } |
即便在文档表格中没有用到table元素，大多数浏览器在处理table元素时，都会自动插入tbody元素，因此完全根据文档中的表格结构设计的css选择器可能不管用。例如，由于浏览器在table和tr之间插入了tbody元素。table > tr 选择器会失效。需要使用table > tbody > tr 或者 table tr。 甚至可以使用 tbody > tr 选择器。
不要让两个单元格扩展到同一区域从而形成重叠单元格。表格元素的用途是表格式数据。形成重叠单元格的唯一原因是表格元素布局其他元素，而这个特性应该用CSS的表格特性来做。
caption 为表格添加标题
为表格定义一个标题，并将其与表格关联起来。
| 元素 | caption |
|---|---|
| 元素类型 | 无 |
| 父元素 | tr |
| 局部属性 | 无 |
| 内容 | 流，但不能是table元素 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | align余属性已不再使用 |
| 默认样式 | caption {display: table-caption; text-align: center; } |
calgroup,col 处理列
HTML 中表格是基于行的，即元素都是放在tr元素中，一行一行地组件起来的。因此对于列的应用样式有点不方便，对于包含不规则单元格的表格更是如此。colgroup和col正是用于解决这个问题。colgroup代表一组列。
<table border="1">
<caption>Table Deme</caption>
<colgroup id="colgroup1">
<col id="col1And2" span="2" />
<col id="col3"/>
</colgroup id="colgroup2" span="2">
<colgroup></colgroup>
<thead>
<tr><th>Rand</th><th>Name</th><th>Color</th><th colspan="2">Size & Votes</th></tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th><td>Apple</td><td>Green</td><td>Medium</td><td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td><td>450</td>
</tr>
<tr>
<th>3rd Favorite:</th><td>Pomegranate</td>
<td colspan="2" rowspan="2">
Pomegranates and cherries can both come in a range of colors
and sizes.
</td>
<td>203</td>
</tr>
<tr>
<th rowspan="2">Joint 4th:</th>
<td>Cherries</td>
<td rowspan="2">75</td>
</tr>
<tr>
<td>Pineapple</td>
<td>Brown</td>
<td>Very Large</td>
</tr>
</tbody>
<tfoot>
<tr><th colspan="5">© 2011 Adam Freeman Fruit Data Enterprises</th></tr>
</tfoot>
</table>