不知道各位用过Excel没有？在处理大量数据的时候，Excel隔行变色的设计是不是让你舒服很多？
现在网上有很多利用jQuery制作隔行变色表格的教程，但你认为为了小小的一个表格而加载50多k的js是否值得？即使贵站有大量表格，其实还不如用CSS方便。要知道这个效果到底有多方便，看下去就知道了。
首先写好表格内容，通常如下：

<table class="datalist" summary="list of members in EE Studay">
	<caption>Member List</caption>
	<tr>
		<th scope="col">Name</th>
		<th scope="col">Class</th>
		<th scope="col">Birthday</th>
		<th scope="col">Constellation</th>
		<th scope="col">Mobile</th>
	</tr>
............................................
	<tr>
		<td>lightyear</td>
		<td>W311</td>
		<td>Mar 23th</td>
		<td>Aries</td>
		<td>1002908</td>
	</tr>
</table>

告诉你，这样的表格是只能用JavaScript或者jQuery做出隔行变色的效果。要用纯CSS打造隔行变色效果的话，我们要对表格做一点小改造。改成下面这种形式：

<table class="datalist" summary="list of members in EE Studay">
	<caption>Member List</caption>
	<tr>
		<th scope="col">Name</th>
		<th scope="col">Class</th>
		<th scope="col">Birthday</th>
		<th scope="col">Constellation</th>
		<th scope="col">Mobile</th>
	</tr>
	<tr>					<!-- 奇数行 -->
		<td>isaac</td>
		<td>W13</td>
		<td>Jun 24th</td>
		<td>Cancer</td>
		<td>1118159</td>
	</tr>
	<tr class="altrow">		<!-- 偶数行 -->
		<td>girlwing</td>
		<td>W210</td>
		<td>Sep 16th</td>
		<td>Virgo</td>
		<td>1307994</td>
	</tr>
.................................................
</table>

嗯，懂一点CSS和HTML的朋友应该知道下一步怎么做了。不懂的同学，可以听我解析一下，tr标签在HTML语言里代表表格的行，td标签代表列。接下来就开始写CSS，如下：

.datalist{
    border:1px solid #0058a3;    /* 表格边框 */
    font-family:Arial;
    border-collapse:collapse;    /* 边框重叠 */
    background-color:#eaf5ff;    /* 表格背景色 */
    font-size:14px;
}
.datalist caption{
    padding-bottom:5px;
    font:bold 1.4em;
    text-align:left;
}
.datalist th{
    border:1px solid #0058a3;    /* 行名称边框 */
    background-color:#4bacff;    /* 行名称背景色 */
    color:#FFFFFF;                /* 行名称颜色 */
    font-weight:bold;
    padding-top:4px; padding-bottom:4px;
    padding-left:12px; padding-right:12px;
    text-align:center;
}
.datalist td{
    border:1px solid #0058a3;    /* 单元格边框 */
    text-align:left;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
    background-color:#c7e5ff;    /* 隔行变色 */
}

有留意到那个边框重叠的属性吗？传说中的细线表格就是这么弄出来的。
好好消化一下，无论是隔行变色还是隔列变色，隔一行还是隔两行······相信什么样式的表格你都能做出来了。
本例效果最终如本文配图。