HTML入门13

标签：ken   ase   lsp   -name   scope   robots   rop   lin   属性   

　　构建表格

　　使用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值，创造精确联系，

HTML入门13

标签：ken   ase   lsp   -name   scope   robots   rop   lin   属性   

原文地址：https://www.cnblogs.com/blackcoding/p/9535183.html