表格行的偶数与奇数

警告: 著作此文时 (2003年 2月), 主要的浏览器还未支持 'nth-child' selector (于2001年11月引入), 而且只有少许支持 COL element.

一种提高易于阅读大型表格的方法是每排以色调交替. 譬如,下面的日期表显示浅灰色背景的偶数排, 以及白底的奇数排. 这规则在此非常简单.

 
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

事实上, CSS不只准许偶数/奇数的交替, 也准许多变化的间距. ‘偶数’ 与 ‘奇数’ 的关键词就只是方便的简称. 譬如一个长的表格,你可以如此作:

 
li:nth-child(5n+3) {font-weight: bold}

这就是说, 始于第三位，每第五位列表项目是粗体字,. 换句话说, 项目的第三, 八, 十三, 十八, 二十三, 等等.., 将是粗体字.

偶数与奇数列

同样也可用于表格中的列, 但要有一个文档对应于列中的元素. HTML为此提供COL. 这表格必须从头每一列有一COL:

 
<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>1994<th>1995<th>1996...

(COL除了用于格式,也可用于其它方面, 但在这种情况下我们所须的只是 COL元素的存在) 下列规则给予第一列黄色的背景, 其次是从第三列开始的每隔一列用灰色底.

 
col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

排的背景(TR)是先于列的背景(COL)绘制的, 因此若你要确认列的背景的显而易见, 你就不应在排的背景着色.

例:

<style type="text/css">

table tr:nth-child(odd) td {

    background: none repeat scroll 00#FFFFFF;}
</style>