美化网页中的 Table 表格样式

Table 表格曾经是网页布局的霸主，可惜现在用的少了，主要还是用在表现表格结构化数据的布局，虽说用得少，但是表格用起来还是很方便的，至少有时候比 DIV+CSS 更方便，关于如何美化网页中的 Table 表格样式，这篇文章将为你提供一些方法。

表格的默认样式

表格有一个默认的样式，在不添加任何属性的情况下，基本都很丑：

上面的截图来自下面的代码，这是最基本的表格结构，有边框默认为 1px，单元格之间还有间隙，后面我们会介绍如何消除这些丑陋的样式：

<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

去掉单元格之间的间隙

在表格元素上面添加 border="0" cellpadding="0" cellspacing="0" 去掉边框和间隙，这样的话我们得到了一个非常干净的表 Table，如果没有内容就是空白的，但是如果在文章里面，可能忘记了给表格添加 border="0" cellpadding="0" cellspacing="0" 那么就只能通过 CSS 去清除填充和间距了。

table{border-collapse:collapse}

表格边框

如果我们保留表格默认的边框，你会发现是单元格的边框，而且还都不一样，即使消除了间隙，上下单元格都有边框，添加下面的代码，即可以给表格添加一个 1px 像素的边框：

table{
    width:100%;
    border-left:#C8B9AE solid 1px;
    border-top:#C8B9AE solid 1px;
    border-collapse:collapse;
} 
table td{
    width:25%;
    border-right:#C8B9AE solid 1px;
    border-bottom:#C8B9AE solid 1px;
    padding:10px 10px 6px;
}

上面的代码演示效果：

如果是需要上边边框，那么可以给 tr 设置边框，然后表格设置三个边：

.single-border{
    border:#C8B9AE solid 1px;
    border-bottom:none;
}
.single-border tr{
    border-bottom:#C8B9AE solid 1px;
}

表格行隔行换色

隔行换色对于区分和查找单元格都是非常方便的，一般这种显示方式，我们可以使用 JavaScript 或者是 CSS 来控制，如果 JavaScript 方法还是要配合样式来显示。

CSS 隔行换色

CSS 的选择器有很多，有一类是特别来选择奇数或者是偶数索引的，用法是在样式类名后面加 :nth-child(2n)，例如下面的 CSS 代码所示：

.interlaced-color tr:nth-child(2n) td{
    background:#F8F8F8;
}

JavaScript 隔行换色

JavaScript 需要配合 CSS 完成隔行换色，因为 JavaScript 主要是控制，当然也可以添加 style 样式，但是使用 CSS 类将更加方便，我们先定义一个有背景的类。

.interlaced-td td{
    background:#F8F8F8
}

然后通过 JavaScript 找到我们的元素，然后添加这类，这里我使用 jQuery 为大家演示下：

$(function(){
    $('tr:even').addClass('interlaced-td');
})