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值,创造精确联系,

posted @ 2018-08-25 20:08  黑猴塞雷  阅读(81)  评论(0编辑  收藏  举报