Table CSS - 表格样式

Web2.0时代，设计网站提倡少有表格。现在几乎没有人再用表格（table）来建立网站的布局（layout）了，这主要是因为以下原因：

• 用表格设计的网站占用带宽，打开速度慢。
• 用表格设计网站不如用DIV来的灵活。

因为本文的重点不是介绍为什么不用表格，相反我要介绍的是如何使用CSS来点缀表格。:-) 所以我不对这个问题深入分析，如果你想要了解更深，建议阅读这篇文章：http://davespicks.com/essays/notables.html。

上面我提到“现在几乎没有人再用表格来布局”，但是我们仍然会在HTML中看到一些表格代码。我的博客就是一个例子！我是用Windows Live Writer来撰写和发布日志的，有时我要在文章里插入表格来对比一些数据，例如：Perl 的排序问题中的比较列表。虽然我可以用DIV来带替Table，但是Windows Live Writer提供插入表格的功能，用表格要比用DIV方便很多，因为我不用去写HTML代码。可是Live Writer提供的表格没有什么样式，在HTML上显示出的是带双边框的难看的表格。因此我决定在博客的样式表里加上一个简单的表格样式 -- 1px的边框加上浅灰色的背景，这样就漂亮了许多，而且还和我用显示源代码的边框相互匹配了。

CSS代码：

table, td{
  border-color: #cecece;/*定义边框的颜色*/
  border-style: solid;
}
table{
  border-width: 0 0 1px 1px;
  border-spacing: 0;
  border-collapse: collapse;
}
td{
  margin: 0;
  padding: 1px;/*定义区间内容的边距*/
  border-width: 1px 1px 0 0;
  background-color: #fbfbfb;/*定义背景颜色*/
}

请注意：表格是由一个个小分区(td)组成的，在上述CSS代码中，我们定义了表格(table)的左边框和下边框，以及分区(td)的上边框和右边框宽度为1px，但是其他边框宽度为0px，这样就可以做出出单边框的表格来了。

演示如下：

网站开发日志

少儿上网导航(建设中）

英语学习日志