当前位置: 主页 > 网页制作 > CSS > 网页设计:标准化你的表格

网页设计:标准化你的表格

时间:2009-10-13来源:中国IT实验室整理 点击:

 对于第一行数据,屏幕阅读器会读表头的全称,而从第二行开始即使用简称。

    这样让数据表格适应布局是挺困难的,而以下的做法更为常见:即让表头尽可能的短,或者简写,使用title属性或者<abbr>标签提供一个更长的说明。

    把表头和数据联系起来:scope,id,headers属性

    就我用到现在,很多表格要比上面提供的例子复杂的多。让例子复杂一点,我会移去“Company”表头,并且把第一列的数据移到表头单元格里:

    <table summary="The number of employees and the foundation year of some imaginary companies.">

    <caption>Table 1: Company data</caption>

    <tr>

    <td></td>

    <th>Employees</th>

    <th>Founded</th>

    </tr>

    <tr>

    <th>ACME Inc</th>

    <td>1000</td>

    <td>1947</td>

    </tr>

    <tr>

    <th>XYZ Corp</th>

    <td>2000</td>

    <td>1973</td>

    </tr>

    </table>

    Table 1: Company data Employees Founded

    ACME Inc 1000 1947

    XYZ Corp 2000 1973

    在这个表格里,每一个数据单元格都有两个表头。最简单的方法让那些非可视的浏览器理解这个表格,就是为每个表头添加一个scope属性。

    <table summary="The number of employees and the foundation year of some imaginary companies.">

    <caption>Table 1: Company data</caption>

    <tr>

    <td></td>

    <th scope="col">Employees</th>

    <th scope="col">Founded</th>

    </tr>

    <tr>

    <th scope="row">ACME Inc</th>

    <td>1000</td>

    <td>1947</td>

    </tr>

    <tr>

    <th scope="row">XYZ Corp</th>

    <td>2000</td>

    <td>1973</td>

    </tr>

    </table>

    Scope属性同时定义了行的表头和列的表头:

    col: 列表头

    row: 行表头

    在第一行的<th>加上值为col的scope属性,声明他们是下面数据单元格的表头。同样的,给每行的开头<th>加上值为row的scope属性声明他们是右边数据单元格的表头。

    Scope属性还有两个值:

    colgroup: 定义列组(column group)的表头信息

    rowgroup: 定义行组(row group)的表头信息

    一个列组是由<colgroup>标签定义的。行组则是由<thead>、<tfoot>和<tbody>定义的。稍后我将会详细介绍它们。

    如果你既想要保留“Company”表头,而又想让公司名字作为行表头(row headers)显示,你会怎么做?那样的话,应该使得包含公司名字的单元格同时提供表头和数据信息。也就是说,<td>标签也应该加上scope属性:

    <table summary="The number of employees and the foundation year of some imaginary companies.">

    <caption>Table 1: Company data</caption>

    <tr>

    <th scope="col">Company</th>

    <th scope="col">Employees</th>

    <th scope="col">Founded</th>

    </tr>

    <tr>

    <td scope="row">ACME Inc</td>

    <td>1000</td>

    <td>1947</td>

    </tr>

    <tr>

    <td scope="row">XYZ Corp</td>

    <td>2000</td>

    <td>1973</td>

    </tr>

    </table>

站长资讯网
.
分页: [1] [2] [3] [4] [5] [6]
TAG: 表格

查看[网页设计:标准化你的表格]所有评论
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:
关于我们 | 友情链接 | 网址推荐 | 常用资讯 | 网站地图 | RSS | 网站留言