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

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

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

 这样的话可视化浏览器不会默认的把company name显示为表头。所以需要用CSS来修正一下,就刚才那个例子,我使用了下面的CSS:

    td[scope] {

    font-weight:bold;

    }

    要注意上面的规则使用了属性选择符,IE是不支持的。而通过添加一个class来样式化表头是个不错的办法。

    Table 1: Company data Company Employees Founded

    ACME Inc 1000 1947

    XYZ Corp 2000 1973

    另一个连接表格数据单元格和表头的方法就是给每一个表头添加一个唯一的ID。然后为下面的数据单元格添加headers属性,这个headers属性值包含用空格分开的各个ID,这些ID代表的表头各自关联到该数据单元格上。这样做很复杂,只是当有超过两个表头的单元格才用。在复杂的和不规则的表格中,scope属性就力不从心了。

    为了演示,我修改了一下表格,加上了公司雇员性别及人数:

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

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

    <tr>

    <td rowspan="2"></td>

    <th id="employees" colspan="2">Employees</th>

    <th id="founded" rowspan="2">Founded</th>

    </tr>

    <tr>

    <th id="men">Men</th>

    <th id="women">Women</th>

    </tr>

    <tr>

    <th id="acme">ACME Inc</th>

    <td headers="acme employees men">700</td>

    <td headers="acme employees women">300</td>

    <td headers="acme founded">1947</td>

    </tr>

    <tr>

    <th id="xyz">XYZ Corp</th>

    <td headers="xyz employees men">1200</td>

    <td headers="xyz employees women">800</td>

    <td headers="xyz founded">1973</td>

    </tr>

    </table>

    Table 1: Company data Employees Founded

    Men Women

    ACME Inc 700 300 1947

    XYZ Corp 1200 800 1973

    你可以发现,这种方法真的很麻烦,所以如果可能的话,还是尽量用scope属性吧。

    跨行和跨列

    在以前用表格布局的年代,rowspan属性和colspan属性常被用来让单元格跨几列或跨几行,来布局那些经过整齐切割的图像。这两个属性现在还在用, 因为并没有CSS来控制单元格的跨行和跨列。仔细想想,其实是很有道理的:跨行和跨列示表格结构(structure)的一部分,而不是其表现(presentation)。

    列和列组:<col>和<colgroup>

    HTML提供了<colgroup>和<col>标签来为相关的表格列分组。这样就可以(在一些浏览器中)使用CSS来单独的为列样式化。列组也可以使用scope属性来标明其表头信息。

    这就是我要说的关于列和列组的全部。更多信息参考“其他”部分。

    行组: <thead>, <tfoot>, 和<tbody>

    表格的行可以分组为表头组(<thead>), 表尾(或表注)组(<tfoot>), 然后是一个或多个表身(<tbody>) 。每一个行组必须包含一个或多个表格行。

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

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