表格基础2

配置无障碍访问表格

1.如果只依靠屏幕朗读器朗读表格内容，默认会按编码顺序听到表格中的内容，一行接一行，一个单元格接一个单元格。W3C建议：

• 使用表头元素(<th>标记)指定列或行标记。
• 在table元素中使用summary属性描述表格的用途和组织方式。
• 使用caption元素为表格提供标题。

   对于较复杂表格，W3C建议将td单元格与表头关联。具体就是th中定义id，在td中通过headers属性引用该id。

<table border="1" summary="A list of bird settings with one bird listed in each row.">
<caption>Bird Setting</caption>
       <tr>
             <th id="name">Name</th>
             <th id="data">Data</th>
       </tr>
       <tr>
             <td headers="name">Bobok</td>
             <td headers="data">5/25/10</td>
       </tr>
</table>

2.scope属性用于关联单元格和行、列标题。它指定一个单元格是列标题(scope="col")或行标题(scope="row")。

用CSS配置表格样式

配置表样式的XHTML属性和CSS属性：

XHTML属性	CSS属性
align	为对齐表格，要配置table选择符的width和margin属性 要对齐单元格中的内容，则使用text-align属性
width	width
height	height
cellpadding	padding
cellspacing	border-spacing;数值(px或em)或百分比。0应该省略单位。一个带单位(px或em)的数值同时配置水平和垂直间距；两个带单位(px或em)的数值分别配置水平和垂直间距
bgcolor	background-color
valign	vertical-align
borfer	border,border-style,border-spacing
无	background-image

CSS3结构性伪类

1.CSS3结构性伪类选择符允许根据元素在文档结构中的位置(比如每隔一行)来选择和应用类，得到主流浏览器的支持。

2.常用的CSS3结构性伪类：

伪类	用途
:first-of-type	用于指定类型的第一个元素
:first-child	用于元素的第一个子
:last-of-type	用于指定类型的最后一个元素
:last-child	用于元素的最后一个子
:nth-of-type(n)	用于指定类型的第n个元素。n为一个数字、odd或even

3.:first-letter.配置首字母有别于其他字母。
    :first-line.配置第一行区别于其他行。
表行分组

1.表行可分为三个组别：表头<thead>，表格主体<tbody>以及表脚<tfoot>。

2.要以不同方式配置表格中的不同区域，这种分组方式就相当有用。配置了一个<thead>或<tfoot>区域，就必须配置<tbody>。反之，表头或表脚则可有可无。