超简洁table表格css样式实例分析
feilong.org 修订于2010-07-24 07:42:03 546 次浏览这里飞龙再次尝试如何制作超级精练的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 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发