在網(wǎng)頁設(shè)計時，當表格的行和列比較多時，表格如果采用相同的背景顏色，用戶就會感到凌亂，那么可以設(shè)置隔行變色的效果，使奇數(shù)行和偶數(shù)行背景顏色不同，就能使表格看起來清晰而一目了然，從而達到高效瀏覽的目的。
【操作步驟】第1步，新建文檔，保存為index.html。構(gòu)建網(wǎng)頁結(jié)構(gòu)，在<body>標簽中輸入以下內(nèi)容：
<table id="mytable" cellspacing="0" summary="財經(jīng)2000級畢業(yè)生通訊錄">
<caption> 財經(jīng)2000級畢業(yè)生通訊錄 </caption>
<tr>
<th scope="col" abbr="Configurations" >姓名</th>
<th scope="col" abbr="Dual 1.8">出生日期</th>
<th scope="col" abbr="Dual 2">電話</th>
<th scope="col" abbr="Dual 2.5">單位</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">王明</th><td>1978.1.4</td>
<td>137563443</td>
<td>中國鐵道部</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">李麗</th>
<td class="alt">1977.5.7</td>
<td class="alt">13893212</td>
<td class="alt">北京市朝陽區(qū)街道辦事處</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">劉麗敏</th>
<td>1978.4.23</td>
<td>13345678</td>
<td>北京市11 中學</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">李松</th>
<td class="alt">1977.11.31</td>
<td class="alt">139432567</td>
<td class="alt">北京東城區(qū)防汛辦</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">趙艷</th>
<td>1978.7.3</td>
<td>1355613234</td>
<td>北京深華新股份有限公司</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">杜征</th>
<td class="alt">1978.6.19</td>
<td class="alt">1368395322</td>
<td class="alt">酷6網(wǎng)</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">王朋</th>
<td>1978.9.22</td>
<td>13567890</td>
<td>adobe公司</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">楊小東</th>
<td class="alt">1978.1.3</td>
<td class="alt">1354983611</td>
<td class="alt">朝陽區(qū)將臺東路樂天瑪特</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">楊秀燕</th>
<td>1977.12.3</td>
<td>1354353623</td>
<td>朝陽區(qū)教委</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">張小光</th>
<td class="alt">1978.10.24</td>
<td class="alt">134567831</td>
<td class="alt">鐵路第二中學</td>
</tr></table>
以上代碼中，將奇數(shù)行名稱定義為spec類，偶數(shù)行名稱定義為specalt類，并通過<td class="alt">定義了偶數(shù)行中的單元格，此時的顯示效果可以看到，表格的基本結(jié)構(gòu)已經(jīng)搭建好了，但是由于在網(wǎng)頁設(shè)計時沒有進行CSS樣式設(shè)置，界面中只把數(shù)據(jù)羅列起來，沒有任何修飾。
第2步，定義網(wǎng)頁基本屬性、表格#mytable樣式以及表格標題樣式。在<head>標簽內(nèi)添加<styletype="text/css">標簽，定義一個內(nèi)部樣式表，然后輸入下面樣式：
body { background: #E6EAE9; } /*網(wǎng)頁基本樣式*/#mytable { /*表格樣式*/
width: 700px; /*表格寬度*/
padding: 0;
margin: 0;
border: 1px solid #C1DAD7; /*表格邊框*/}caption {/*設(shè)置表格標題*/
padding: 0 0 5px 0;
text-align: center; /*水平居中*/
font-size: 30px; /*字體大小*/
font-weight: bold; /*字體加粗*/}
在以上代碼中，通過首先定義了頁面的背景顏色，在#mytable中設(shè)置了表格的寬度為700px，并為其添加了表格邊框。
第3步，定義單元格的共有屬性。
th {/*表格名稱樣式*/color: #4f6b72; /*表格名稱的字體顏色*/
letter-spacing: 2px; /*字間距*/
text-align: center; /*水平居中*/
padding: 6px 6px 6px 12px; /*名稱單元格的內(nèi)邊距*/
background: #CAE8EA; /*名稱單元格的背景顏色*/
border: 1px solid #C1DAD7; /*名稱單元格的邊框*/}td { /*表格單元格樣式*/
background: #fff; /*單元格背景色*/
padding: 6px 6px 6px 12px;
color: #4f6b72;
text-align: center;
border: 1px solid #C1DAD7; /*單元格邊框*/}
在以上代碼中，定義了表格中所有單元格的共有樣式。
第4步，實現(xiàn)網(wǎng)頁設(shè)計中表格的隔行變色。
.spec { /*奇數(shù)行名稱樣式*/ background: #fff; /*背景顏色*/ }
.specalt { /*偶數(shù)行名稱樣式*/
background: #f5fafa;
color: #797268; /*字體顏色*/}
.alt {/*偶數(shù)行單元格樣式*/
background: #F5FAFA; color: #797268;}
以上代碼中，首先通過spec設(shè)置了奇數(shù)行中<th>標簽的樣式，通過specalt設(shè)置了偶數(shù)行中<th>標簽的樣式，最后在alt中設(shè)置了偶數(shù)單元格，也就是<td>標簽的樣式。
提示：在CSS中，設(shè)置隔行變色十分簡單，主要在于給奇數(shù)行和偶數(shù)行設(shè)置不同的背景顏色，為奇數(shù)行和偶數(shù)行的<th>標簽添加相應的類以及為單元格<td>標簽添加相應的類，代碼如下：<th scope="row" class="spec">th scope="row" class="specalt"><td class="alt">然后在CSS樣式表中對奇數(shù)行和偶數(shù)行進行單獨的樣式設(shè)置，主要是在網(wǎng)站建設(shè)時配合整體設(shè)計協(xié)調(diào)的基礎(chǔ)上，改變背景顏色、字體顏色等。
當前文章標題：如何在網(wǎng)頁設(shè)計中設(shè)計清晰、醒目的表格
當前URL：http://supportcoffeeroasters.com/news/wzzz/3118.html
上一篇：案例實戰(zhàn)：美化表格
