HTML入门13
构建表格
使用colspan和rowspan添加无单位的数字值作为属性来实现行合并和列合并;
<col>来定义列的样式,每一个<col>都会制定每列的样式,对于不需要指定列的样式,仍需要一个空的<col>元素,如果不这样,样式会应用到第一列上,就停止;
<colgroup>
<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>
</colgroup>
其中两个col元素,应用两列的样式信息;<col span="2">代表将空元素的样式应用到表格中两列,
caption标题,为表格添加标题,把他放在table标签下面,summary属性在table元素中似乎用,接下来给表格添加thead、tfoot、tbody结构。
嵌套表格,在一个表格里嵌套另一个表格是可能的,只要包含完整的结构,
接触到一个表格新属性,scope这都是第一遍漏掉的知识点,/可以添加在th元素中,帮助屏幕阅读器设用者更好理解标题单元格,阅读器会识别这种结构化的标记并读出整列或整行,scope="row"还可以选”colgroup“"rowgroup"
<thead>
<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>
<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>
id和标题属性,使用id和headers属性创造标题和单元格之间的联系。td里通过headers属性包含th元素里的id值,创造精确联系,