對(duì)于長(zhǎng)時(shí)間瀏覽大量表格數(shù)據(jù)的用戶(hù)來(lái)說(shuō)，即使是隔行變色的表格，閱讀時(shí)間長(zhǎng)了仍然會(huì)感到疲勞。如果數(shù)據(jù)在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，行能動(dòng)態(tài)地根據(jù)鼠標(biāo)來(lái)變色，就會(huì)大大較少用戶(hù)的疲勞感，也會(huì)使表格更易用，本例介紹了網(wǎng)站建設(shè)時(shí)鼠標(biāo)經(jīng)過(guò)時(shí)變色的表格。
【操作步驟】
第1步，新建文檔，保存為index.html。構(gòu)建網(wǎng)頁(yè)基本結(jié)構(gòu)。在本例中構(gòu)建了一個(gè)8行4列的表格。
<table class="chart" summary="list of members in EE Studay">
<caption>
學(xué)生成績(jī)一覽表
</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">數(shù)學(xué)</th>
<th scope="col">語(yǔ)文</th>
<th scope="col">外語(yǔ)</th>
</tr>
<tr>
<td>TOM</td>
<td>100</td>
<td>97</td>
<td>59</td>
</tr>
<tr>
<td>YOLANDA</td>
<td>76</td>
<td>77</td>
<td>89</td>
</tr>
<tr>
<td>JACK</td>
<td>85</td>
<td>97</td>
<td>66</td>
</tr>
<tr>
<td>LILY</td>
<td>66</td>
<td>87</td>
<td>76</td>
</tr>
<tr>
<td>JASSIC</td>
<td>88</td>
<td>89</td>
<td>96</td>
</tr>
<tr>
<td>PETTER</td>
<td>56</td>
<td>87</td>
<td>67</td>
</tr>
<tr>
<td>MING</td>
<td>77</td>
<td>88</td>
<td>83</td>
</tr></table>
此時(shí)在沒(méi)有CSS樣式設(shè)置時(shí)的顯示結(jié)果如圖6.62所示。
第2步，定義表格和表格標(biāo)題樣式。設(shè)計(jì)網(wǎng)頁(yè)時(shí)，在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式。
.chart {/*表格樣式*/
border: 1px solid #0058a3; /*表格邊框*/
font-family: Arial;
border-collapse: collapse; /*邊框重疊*/
background-color: #eaf5ff; /*表格背景色*/
font-size: 14px;
}.chart caption {/*表格標(biāo)題樣式*/
padding-bottom: 5px;
font-size: 20px;
font-weight: bold;
text-align: center;}
以上代碼中，首先設(shè)置了表格的樣式和表格的邊框，并對(duì)表格標(biāo)題樣式進(jìn)行了定義。
第3步，定義表格的行名稱(chēng)樣式和單元格樣式。
.chart th {/*行名稱(chēng)樣式*/
border: 1px solid #0058a3; /*行名稱(chēng)邊框*/
background-color: #4bacff; /*行名稱(chēng)背景色*/
color: #FFFFFF; /*行名稱(chēng)顏色*/
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 12px;
padding-right: 12px;
text-align: center; /*水平對(duì)齊*/}
.chart td {/*單元格樣式*/
border: 1px solid #0058a3; /*單元格邊框*/
text-align: center; /*水平對(duì)齊*/
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;}
以上代碼中，首先定義了<th>標(biāo)簽樣式和<td>標(biāo)簽樣式。可以看到，整個(gè)表格樣式已經(jīng)形成，最后只差實(shí)現(xiàn)動(dòng)態(tài)變色。
第4步，實(shí)現(xiàn)動(dòng)態(tài)變色。
.chart tr:hover { background-color: #CC9999; /*動(dòng)態(tài)變色*/}
從以上代碼可以看到，實(shí)現(xiàn)動(dòng)態(tài)變色可以直接調(diào)用<tr>標(biāo)簽的偽類(lèi)hover。
提示：在現(xiàn)代標(biāo)準(zhǔn)瀏覽器中支持<tr>標(biāo)簽的偽類(lèi)，但是在IE瀏覽器中，只有在IE8以上版本才支持，所以要注意瀏覽器的兼容性。
當(dāng)前文章標(biāo)題：在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)動(dòng)態(tài)效果的表格
當(dāng)前URL：http://www.iy5y368.cn/news/wzzz/3119.html
