如何在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)清晰、醒目的表格

  • 2019-10-29 15:55:04
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

網(wǎng)頁(yè)設(shè)計(jì)時(shí),當(dāng)表格的行和列比較多時(shí),表格如果采用相同的背景顏色,用戶就會(huì)感到凌亂,那么可以設(shè)置隔行變色的效果,使奇數(shù)行和偶數(shù)行背景顏色不同,就能使表格看起來清晰而一目了然,從而達(dá)到高效瀏覽的目的。

【操作步驟】第1步,新建文檔,保存為index.html。構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu),在<body>標(biāo)簽中輸入以下內(nèi)容:

<table id="mytable" cellspacing="0" summary="財(cái)經(jīng)2000級(jí)畢業(yè)生通訊錄">    

<caption>     財(cái)經(jīng)2000級(jí)畢業(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>中國(guó)鐵道部</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 中學(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">北京東城區(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ū)將臺(tái)東路樂天瑪特</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">鐵路第二中學(xué)</td>    

</tr></table>

以上代碼中,將奇數(shù)行名稱定義為spec類,偶數(shù)行名稱定義為specalt類,并通過<td class="alt">定義了偶數(shù)行中的單元格,此時(shí)的顯示效果可以看到,表格的基本結(jié)構(gòu)已經(jīng)搭建好了,但是由于在網(wǎng)頁(yè)設(shè)計(jì)時(shí)沒有進(jìn)行CSS樣式設(shè)置,界面中只把數(shù)據(jù)羅列起來,沒有任何修飾。

第2步,定義網(wǎng)頁(yè)基本屬性、表格#mytable樣式以及表格標(biāo)題樣式。在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式:

body { background: #E6EAE9; } /*網(wǎng)頁(yè)基本樣式*/#mytable { /*表格樣式*/    

width: 700px;                  /*表格寬度*/    

padding: 0;    

margin: 0;    

border: 1px solid #C1DAD7;     /*表格邊框*/}caption {/*設(shè)置表格標(biāo)題*/    

padding: 0 0 5px 0;    

text-align: center;            /*水平居中*/    

font-size: 30px;               /*字體大小*/    

font-weight: bold;             /*字體加粗*/}

在以上代碼中,通過首先定義了頁(yè)面的背景顏色,在#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步,實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)中表格的隔行變色。

.spec { /*奇數(shù)行名稱樣式*/    background: #fff;            /*背景顏色*/ }

.specalt {                       /*偶數(shù)行名稱樣式*/    

background: #f5fafa;    

color: #797268;              /*字體顏色*/}

.alt {/*偶數(shù)行單元格樣式*/    

background: #F5FAFA;    color: #797268;}

以上代碼中,首先通過spec設(shè)置了奇數(shù)行中<th>標(biāo)簽的樣式,通過specalt設(shè)置了偶數(shù)行中<th>標(biāo)簽的樣式,最后在alt中設(shè)置了偶數(shù)單元格,也就是<td>標(biāo)簽的樣式。

提示:在CSS中,設(shè)置隔行變色十分簡(jiǎn)單,主要在于給奇數(shù)行和偶數(shù)行設(shè)置不同的背景顏色,為奇數(shù)行和偶數(shù)行的<th>標(biāo)簽添加相應(yīng)的類以及為單元格<td>標(biāo)簽添加相應(yīng)的類,代碼如下:<th scope="row" class="spec">th scope="row" class="specalt"><td class="alt">然后在CSS樣式表中對(duì)奇數(shù)行和偶數(shù)行進(jìn)行單獨(dú)的樣式設(shè)置,主要是在網(wǎng)站建設(shè)時(shí)配合整體設(shè)計(jì)協(xié)調(diào)的基礎(chǔ)上,改變背景顏色、字體顏色等。

當(dāng)前文章標(biāo)題:如何在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)清晰、醒目的表格

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3118.html

上一篇:案例實(shí)戰(zhàn):美化表格

下一篇:在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)動(dòng)態(tài)效果的表格

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))