0
点赞
收藏
分享

微信扫一扫

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属性
<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>

<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>

举报

相关推荐

0 条评论