超简洁table表格css样式实例分析
feilong.org 修订于2010-07-24 07:42:03 414 次浏览这里飞龙再次尝试如何制作超级精练的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粘贴。不过如果你是从word或excel或互联网上复制粘贴的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
更新网址:https://feilong.org/css-for-purified-table
最初发布:20100724 07:42:03 feilong.org 于广州
加入收藏夹,查看更方便。
所在分类: 网站开发