HTML创建表格
创建表格的基本语法(table元素、tr 元素、th元素、td元素)
表格由4个基本元素构成:
- table 元素用来定义表格，整个表格包含在<table>和</table>标签中。
- tr元素用来定义表格中的一个行， 它是单元格的容器，每行可以包含有多个单元格，由<tr>和</tr>标签表示。
- th元素元素用来定义单元格表头信息，所有单元格在行标签内，每个单元格由一对<th> 和</th>标签表示。
- td元素用来定义单元格，所有单元格在行标签内，每个单元格由一对<td> 和</td>标签表示。如果单元格有数据(文本、图片等)，则在这个标签间插入数据。
设置表格边框样式
可以用table元素中的style属性设置表格的边框线，线条样式、线条粗细以及颜色。示例如下：
<table style="border:1px solid #000">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
定义表格描述(summary属性)
表格用summary属性来为表格的目的和结构提供一个概要说明，这个说明一般用于非可视化的浏览器，如语音合成器和布莱叶盲文。
示例如下：
<table summary="xxxxxxxxxxxx">
...
</table>
创建表格标题(caption元素)
caption元素必须紧跟着table元素开始标签后被定义，一个table元素只能包含一个caption元素。
示例如下：
<table>
<caption>XXXX</caption>
...
</table>
除此之外还可以用figure元素和figcaption元素为表格定义标题，用法如下：
<figure>
<figcaption>XXXX</figcaption>
</figure>
<table>
...
</table>
设置单元格
th元素中的scope属性为表格设置表头
scope的属性值及其功能描述如下：
| scope属性值 | 功能描述 |
|---|---|
| col | 将该单元格的内容设置为当前列的表头 |
| colgroup | 将该单元格的内容设置为当前列组的表头 |
| row | 将该单元格的内容设置为当前行的表头 |
| rowgroup | 将该单元格的内容设置为当前行组的表头 |
| atuo | 默认值。 |
th元素、td元素中headers属性
headers属性可以定义一系列th元素的id属性值，示例如下：
<table >
<tr>
<td></td>
<th id="a1">A</th>
<th id="b1">B</th>
</tr>
<tr>
<th id="1">小写</th>
<td headers="a1 1">aa</td>
<td headers="b1 1">bb</td>
</tr>
</table>
跨多行、多列的单元格
跨多行单元格，可通过td、th元素的rowspan属性设置
跨多列单元格，可通过td、th元素的colspan属性设置
<table >
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td colspan="3">aa</td>
</tr>
</table>
表格的分组显示
按行的分组显示（thead元素、tfoot元素、tbody元素)
在呈现时，每一个thead、tfoot 和tbody元素必须包含一个或多个行。 并且thead、 tfoot和tbody元素必须包含相同数量的列。这3个元素必频位于table 元素内，tfoot 元素也必须在tbody元素之前定义，这样浏览器就可以在所有表格数据完全下载之前呈现表格尾。这样，有助于使用增量方式渲染数据行。
thead元素和tfoot元素在-一个表格中都只能有一个，而tbody元素可以有多个。
Thead、tfoot 和tbody 元素的结束标签在某些情况下可以省略:
- 当一个表格只包含一个表格 主体并且没有表格头和表格尾部分时，tbody 元素的开始标签和结束标签都可以省略。
- 不管何时，tbody元素的结束标签都可以省略。
- 当表格中包含表格头和表格尾时，thead、 tfoot 元素的开始标签都是必需的，但是它们的结束标签都可以省略。
按列的分组显示（colgroup元素、col元素)
colgroup元素和col元素可以使用span属性来定义列分组，并且功能基本相同。
- 如果colgroup元素不定义span属性，那么就会创建一个 单列分组，它仅包含一个列;如果col元素不定义span 属性，那么该col元素也会创建一个列分组， 并且也是仅包含一个列。
- 如果定义一个正整数N,那么就会创建一一个包含 N个列的分组。
- span 属性的值必须是大于0的整数。
- 如果colgroup元素中包含有col元素，那么就会忽略colgroup 元素的span属性。
例：
<colgroup span="4">
</colgroup>
或
<colgroup>
<col>
<col span="2">
<col>
</colgroup>
