在網(wǎng)頁(yè)設計時(shí)，當表格的行和列比較多時(shí)，表格如果采用相同的背景顏色，用戶(hù)就會(huì )感到凌亂，那么可以設置隔行變色的效果，使奇數行和偶數行背景顏色不同，就能使表格看起來(lái)清晰而一目了然，從而達到高效瀏覽的目的。
【操作步驟】第1步，新建文檔，保存為index.html。構建網(wǎng)頁(yè)結構，在<body>標簽中輸入以下內容：
<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">電話(huà)</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">北京市朝陽(yáng)區街道辦事處</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">劉麗敏</th>
<td>1978.4.23</td>
<td>13345678</td>
<td>北京市11 中學(xué)</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">北京東城區防汛辦</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">朝陽(yáng)區將臺東路樂(lè )天瑪特</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">楊秀燕</th>
<td>1977.12.3</td>
<td>1354353623</td>
<td>朝陽(yáng)區教委</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">鐵路第二中學(xué)</td>
</tr></table>
以上代碼中，將奇數行名稱(chēng)定義為spec類(lèi)，偶數行名稱(chēng)定義為specalt類(lèi)，并通過(guò)<td class="alt">定義了偶數行中的單元格，此時(shí)的顯示效果可以看到，表格的基本結構已經(jīng)搭建好了，但是由于在網(wǎng)頁(yè)設計時(shí)沒(méi)有進(jìn)行CSS樣式設置，界面中只把數據羅列起來(lái)，沒(méi)有任何修飾。
第2步，定義網(wǎng)頁(yè)基本屬性、表格#mytable樣式以及表格標題樣式。在<head>標簽內添加<styletype="text/css">標簽，定義一個(gè)內部樣式表，然后輸入下面樣式：
body { background: #E6EAE9; } /*網(wǎng)頁(yè)基本樣式*/#mytable { /*表格樣式*/
width: 700px; /*表格寬度*/
padding: 0;
margin: 0;
border: 1px solid #C1DAD7; /*表格邊框*/}caption {/*設置表格標題*/
padding: 0 0 5px 0;
text-align: center; /*水平居中*/
font-size: 30px; /*字體大小*/
font-weight: bold; /*字體加粗*/}
在以上代碼中，通過(guò)首先定義了頁(yè)面的背景顏色，在#mytable中設置了表格的寬度為700px，并為其添加了表格邊框。
第3步，定義單元格的共有屬性。
th {/*表格名稱(chēng)樣式*/color: #4f6b72; /*表格名稱(chēng)的字體顏色*/
letter-spacing: 2px; /*字間距*/
text-align: center; /*水平居中*/
padding: 6px 6px 6px 12px; /*名稱(chēng)單元格的內邊距*/
background: #CAE8EA; /*名稱(chēng)單元格的背景顏色*/
border: 1px solid #C1DAD7; /*名稱(chēng)單元格的邊框*/}td { /*表格單元格樣式*/
background: #fff; /*單元格背景色*/
padding: 6px 6px 6px 12px;
color: #4f6b72;
text-align: center;
border: 1px solid #C1DAD7; /*單元格邊框*/}
在以上代碼中，定義了表格中所有單元格的共有樣式。
第4步，實(shí)現網(wǎng)頁(yè)設計中表格的隔行變色。
.spec { /*奇數行名稱(chēng)樣式*/ background: #fff; /*背景顏色*/ }
.specalt { /*偶數行名稱(chēng)樣式*/
background: #f5fafa;
color: #797268; /*字體顏色*/}
.alt {/*偶數行單元格樣式*/
background: #F5FAFA; color: #797268;}
以上代碼中，首先通過(guò)spec設置了奇數行中<th>標簽的樣式，通過(guò)specalt設置了偶數行中<th>標簽的樣式，最后在alt中設置了偶數單元格，也就是<td>標簽的樣式。
提示：在CSS中，設置隔行變色十分簡(jiǎn)單，主要在于給奇數行和偶數行設置不同的背景顏色，為奇數行和偶數行的<th>標簽添加相應的類(lèi)以及為單元格<td>標簽添加相應的類(lèi)，代碼如下：<th scope="row" class="spec">th scope="row" class="specalt"><td class="alt">然后在CSS樣式表中對奇數行和偶數行進(jìn)行單獨的樣式設置，主要是在網(wǎng)站建設時(shí)配合整體設計協(xié)調的基礎上，改變背景顏色、字體顏色等。
當前文章標題：如何在網(wǎng)頁(yè)設計中設計清晰、醒目的表格
當前URL：http://amzcoolest.com/news/wzzz/3118.html
上一篇：案例實(shí)戰：美化表格
