HTML5之表格

1：表格的描述(summary属性)

      表格使用summary属性来为表格的目的和结构提供一个概要说明，这个概要说明一般用于可视化浏览器，如语音合成器和布莱耶盲文。

     

<table summary="这里描述了东部地区的人均GDP增长">
  <tr>
    <th>第一季度</th>
    <th>第二季度</th>
    <th>第三季度</th>
    <th>第四季度</th>
  </tr>
  <tr>
    <td>20.4</td>
    <td>27.4</td>
    <td>90</td>
    <td>20.4</td>
  </tr>
</table>

2：表格的标题(caption元素）

      每个表格都可以通过caption元素来对表格的目的做一个简单的说明，caption元素的内容用来描述表格的特征，并且caption元素必须

紧接着table元素开始标签后被定义，一个table元素仅能包含一个caption元素

         

<table>
  <caption>东部地区的人均GDP增长</caption>
  <tr>
    <th scope="col">第一季度</th>
    <th scope="col">第二季度</th>
    <th scope="col">第三季度</th>
    <th scope="col">第四季度</th>
  </tr>
  <tr>
    <td>20.4</td>
    <td>27.4</td>
    <td>90</td>
    <td>20.4</td>
  </tr>
</table>

3：设置单元格(th和td元素)

      1.scope属性

         

属性值	功能描述
col	该单元格的内容作为当前列的表头
colgroup	该单元格的内容作为当前列组的表头
row	该单元格的内容作为当前行的表头
rowgroup	该单元格的内容作为当前行组的表头
aoto	这是默认值，表示基于上下文环境，该单元格的内容作为选中的一些单元格的表头

<table>
  <caption>东部地区的人均GDP增长</caption>
  <tr>
    <td></td>
    <th scope="col">第一季度</th>
    <th scope="col">第二季度</th>
    <th scope="col">第三季度</th>
    <th scope="col">第四季度</th>
  </tr>
  <tr>
    <th scope="row">1999年</th>
    <td>20.4</td>
    <td>27.4</td>
    <td>90</td>
    <td>20.4</td>
  </tr>
  <tr>
    <th scope="row">2000年</th>
    <td>16.4</td>
    <td>18.4</td>
    <td>32</td>
    <td>19</td>
  </tr>
</table>







2：headers属性

       th和td元素都可以使用headers元素，属性值是使用空格隔开的一系列th元素的id属性值，例如：
          headers="header-name1  header-name2  header-name3"
      
<table>
  <caption>东部地区的人均GDP增长</caption>
  <tr>
    <td></td>
    <th id="q1">第一季度</th>
    <th id="q2">第二季度</th>
    <th id="q3">第三季度</th>
    <th id="q4">第四季度</th>
  </tr>
  <tr>
    <th id="y1999">1999年</th>
    <td headers="q1 y1999">20.4</td>
    <td headers="q2 y1999">27.4</td>
    <td headers="q3 y1999">90</td>
    <td headers="q4 y1999">20.4</td>
  </tr>
  <tr>
    <th id="y2000">2000年</th>
    <td headers="q1 y2000">16.4</td>
    <td headers="q2 y2000">18.4</td>
    <td headers="q3 y2000">32</td>
    <td headers="q4 y2000">19</td>
  </tr>
</table>



  4：表格的按行分组显示(thead元素、tfoot元素、tbody元素）
        
<table>
<thead>
  <tr>
    <th>第一季度</th>
    <th>第二季度</th>
    <th>第三季度</th>
    <th>第四季度</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <th>第一季度</th>
    <th>第二季度</th>
    <th>第三季度</th>
    <th>第四季度</th>
  </tr>
</tfoot>
<tbody>
  <tr>
    <td>20.4</td>
    <td>27.4</td>
    <td>90</td>
    <td>20.4</td>
  </tr>
</tbody>
</table>



 5：表格的按列分组显示(colgroup元素和col元素）
      1：使用colgroup和span属性
            <colgroup span="4">       
            </colgroup>

            <colgroup span="5">  
            </colgroup>
         2：使用col元素
              <colgroup>
                   <col></col>
                   <col></col>
             </colgroup>



     技巧：使用span属性可以直接将列的宽度分组在一起，而不是使用col元素，但是，当使用col元素时，可以为单个列定义样式：
              <colgroup>
                   <col span="39">
                   <col id="format-me-specially"
             </colgroup>
          第一个col元素横跨39列，第二个定义了id属性目的是应用样式表，这样就可以为该列单独定义样式。