飞龙博客

飞龙博客 飞龙在天

超简洁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粘贴。不过如果你是从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

更新网址:https://feilong.org/css-for-purified-table
最初发布:20100724 07:42:03 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文:

blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 书法 前端开发 博客 名企名网 国学 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认