【表格布局】表格结构布局

◇组件名称:

    表格布局

◇功能描述：

    各类表格的HTML结构。

◇上下文情景：

    表格不应该用于网站的一面布局，而应该用于呈现相关的数据，各类表格的布局体现出语义化和提高可访问性。

◇工作方式&技术要点

    ·border-collapse属性指定表格应该使用哪种边框模型。取值可以为collapse（折叠边框模型）：相邻的单元格彼此共享边框。separate（独立边框模型）：相邻单元格保留各自的边框。
    ·通过<thead>、<tfoot>、<tbody>划分表格结构。其中<thead>要放在<caption>之后（如果有caption的话），<tfoot>标签必须位于<tbody>之前。
    ·可以使用<scope>使数据与标题关联起来。scope接受的属性值为：col、row、colgroup、rowgroup。
    ·<colgroup>和<col>元素只有4种CSS属性（border、background、width、visibility）。 

◇关键代码展示

1.使用<thead><tfoot><tbody>结构化表格，使用<th>定义表格标题。
补充：css样式化为1像素边框。 

<table>
  <caption>Personal details</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Place of residence</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Place of residence</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
        <td>Paul Haine </td>
        <td>Oxford</td>
    </tr>
    <tr>
        <td>Vikki Roberts </td>
        <td>Bracknell</td>
    </tr>
    <tr>
        <td>Leon Boardman </td>
        <td>London</td>
    </tr>
    <tr>
        <td>Emma Sax </td>
        <td>Peaslake</td>
    </tr>
  </tbody>
  
</table>

 

table {
    border-width:0;
    border-collapse:collapse;
    border-spacing:0;
}
table th, table td {
    border:1px solid #CCC;
}

2.使用<scop>对表格的行列进行关联。
补充：<scope>接受的属性值为：col、row、colgroup、rowgroup 

<table border="1">
    <tr>
        <td></td>
        <th scope="col">Staff</th>
        <th scope="col">Managers</th>
    </tr>
    <tr>
        <th scope="row">Bitbyte</th>
        <td>20</td>
        <td>1</td>
    </tr>
    <tr>
        <th scope="row">UltraHyperMegaCorp</th>
        <td>3000</td>
        <td>1000</td>
    </tr>
</table>

 

3.使用<colgroup>或<col>对表格列分组，并通过css控制col对列设置样式。
补充:<colgroup>和<col>元素只有4种CSS属性（border、background、width、visibility） 

<caption>Personal details</caption>
<colgroup></colgroup>
<colgroup id="col1"></colgroup>
<colgroup><col /><col /><col /></colgroup>

#col1 {
    background:#CCC;
    border:#F00 2px solid;
    width:300px;
}