HTML5之表格
来源：互联网 发布：统计软件培训 编辑：程序博客网 时间：2024/05/21 17:53
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属性目的是应用样式表，这样就可以为该列单独定义样式。
- HTML5之表格
- HTML5基础之-表格标签
- 06 Html5之表格元素
- HTML5学习笔记之表格标签
- HTML5：表格
- html5 表格
- 表格 -- HTML5
- HTML5学习之四样式、链接和表格
- HTML5学习之七div布局和表格布局
- HTML5表格基础语法
- Html5笔记 表格 布局
- html5 表格使用基础
- HTML5-表格元素
- HTML5 codecademy table表格
- html5表格元素
- HTML5样式、链接、表格
- HTML5 第七章 表格
- html5 创建表格
- 部署Vista – 第18部分：管理Windows部署服务
- 方正XML数据库设计与实现---开篇
- [BetterExplained]为什么你应该（从现在开始就）写博客
- XML数据库管理系统 ---需求与目标
- 部署Windows 7 – 第1部分：Windows AIK 2.0的改进
- HTML5之表格
- 移植thttpd Web服务器到ARM-Linux系统
- 今天上东软参观了
- Windows Server 2003 Service Pack 2 安装和部署指南
- C# 中的委托和事件
- 给想当程序员的大二学生的建议
- C#中的委托和事件(续)
- 《复杂网络理论及应用》
- jQuery获取Select选择的Text和 Value(转)(
