超简洁table表格css样式实例分析

这里飞龙再次尝试如何制作超级精练的table表格,注意飞龙这里没用div或li做表格。本日志更新网址:http://feilong.org/css-for-purified-table 飞龙第2次修订于20100719. 第3次修订于20100724深圳。

一、首先看看普通的j表格源代码:

<table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">竖表头</th>
<th scope="col">横表头</th>
<th scope="col">横表头</th>
</tr>
<tr>
<th scope="row">竖表头</th>
<td>列内容</td>
<td>列内容</td>
</tr>
<tr>
<th scope="row">竖表头</th>
<td>列内容</td>
<td>列内容</td>
</tr>
</table>

二、如果你觉得 width="98%" border="0" cellspacing="0" cellpadding="0"等这些table外观,你其实可以用css样式来控制,那么在css里面如果处理这些元素呢?呵呵,也就是如何给净化后的table表格写css呢?

三、先看看飞龙认为的超精练table表格的源代码:

<table>
<tr>
<th>表头</th>
<th>横表头</th>
<th>横表头</th>
</tr>
<tr>
<th>竖表头</th>
<td>列内容</td>
<td>列内容</td>
</tr>
<tr>
<th>竖表头</th>
<td>列内容</td>
<td>列内容</td>
</tr>
</table>

如何得到这种超简洁的table源代码呢?飞龙以前用Dreamweaver生成,现在用EditPlus粘贴。不过如果你是从wordexcel或互联网上复制粘贴的table表格,可以用正则表达式来清除table里面的垃圾无用代码。这里飞龙提供一个word/excel转html在线工具:http://feilong.org/purify-table 飞龙第2次修订于20100704

四、很明显,源代码只剩下table、th、td标签。

至于表格的width、height、border、cellspacing、cellpadding等内部外观控制属性都没有了。
为什么这么做呢?为了把表格的width、height、border、cellspacing、cellpadding都转移到css里面去控制,从而更深入的html框架和网页css观进一步分离,或者说骨架(frame)和皮肤(skin)分离。

五、飞龙示范的超简洁table表格的css样式表:

<style>
table {border-collapse:collapse;}
td,th {border:1px solid red;}
</style>

六、飞龙补充:一般来说,如果你想用border-spacing,那么border-collapse: separate 和 border-spacing 一起用。IE 无法识别样式表里面的’border-spacing'(IIRC)。飞龙以前谈到过,如何制作规范标准的talbe表格:http://feilong.org/good-table-css

发表评论

电子邮件地址不会被公开。 必填项已用*标注