案例實(shí)戰(zhàn)：美化表格
本節(jié)將通過(guò)實(shí)例的形式幫助讀者設(shè)計(jì)CSS的表格樣式，以提高實(shí)戰(zhàn)技法和技巧，快速理解CSS表格屬性的應(yīng)用。
美化表格
在之前的章節(jié)中介紹了CSS可設(shè)置的表格顏色和表格邊框樣式，本節(jié)通過(guò)一個(gè)簡(jiǎn)單的實(shí)例來(lái)介紹在網(wǎng)站建設(shè)時(shí)通過(guò)CSS美化的方法。本節(jié)將通過(guò)實(shí)例的形式幫助讀者設(shè)計(jì)CSS的表格樣式，以提高實(shí)戰(zhàn)技法和技巧，快速理解CSS表格屬性的應(yīng)用。整個(gè)網(wǎng)頁(yè)設(shè)計(jì)效果如圖所示。
【操作步驟】
第1步，新建文檔，保存為index.html。構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)，在<body>標(biāo)簽中輸入以下內(nèi)容：
<table> <caption class="cap" > 課程表
</caption> /*表格標(biāo)題*/ <tr>
<th></th>
<th scope="col">星期一</th> /*表格列名稱*/
<th scope="col">星期二</th>
<th scope="col">星期三</th>
<th scope="col">星期四</th>
<th scope="col">星期五</th>
</tr> <tr>
<th scope="row">第一節(jié)</th> /*表格行名稱*/
<td>數(shù)學(xué)</td>
<td>數(shù)學(xué)</td>
<td>語(yǔ)文</td>
<td>英語(yǔ)</td>
<td>英語(yǔ)</td>
</tr>
<tr>
<th scope="row">第二節(jié)</th>
<td>數(shù)學(xué)</td>
<td>數(shù)學(xué)</td>
<td>語(yǔ)文</td>
<td>英語(yǔ)</td>
<td>英語(yǔ)</td>
</tr>
<tr>
<th scope="row">第三節(jié)</th>
<td>數(shù)學(xué)</td>
<td>語(yǔ)文</td>
<td>語(yǔ)文</td>
<td>美術(shù)</td>
<td>音樂(lè)</td>
</tr>
<tr>
<th scope="row">第四節(jié)</th>
<td>信息</td>
<td>地理</td>
<td>歷史</td>
<td>英語(yǔ)</td>
<td>數(shù)學(xué)</td>
</tr>
<tr>
<th scope="row">第五節(jié)</th>
<td>生物</td>
<td>歷史</td>
<td>體育</td>
<td>物理</td>
<td>語(yǔ)文</td>
</tr>
<tr>
<th scope="row">第六節(jié)</th>
<td>化學(xué)</td>
<td>數(shù)學(xué)</td>
<td>歷史</td>
<td>英語(yǔ)</td>
<td>地理</td>
</tr>
<tr>
<th scope="row">第七節(jié)</th>
<td>生物</td>
<td>數(shù)學(xué)</td>
<td>語(yǔ)文</td>
<td>美術(shù)</td>
<td>英語(yǔ)</td>
</tr></table>
第2步，規(guī)劃整個(gè)頁(yè)面的基本顯示屬性以及設(shè)置表格樣式。在<head>標(biāo)簽內(nèi)添加<styletype="text/ css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式：
body {/*網(wǎng)頁(yè)基本樣式類(lèi)*/
background-color: #f8e6e6; /*網(wǎng)頁(yè)背景顏色*/
margin: 50px; /*表格四周補(bǔ)白*/}table {/*表格樣式*/
border: 6px double #3186dd; /*表格邊框*/
font-family: Arial; text-align: center; /*表格中文字水平居中對(duì)齊*/
border-collapse: collapse; /*邊框重疊 */}
此時(shí)可以看到，網(wǎng)頁(yè)背景顏色發(fā)生了改變，并且表格添加了邊框。
第3步，設(shè)置表格標(biāo)題的樣式。樣式代碼如下。
.cap {/*設(shè)置表格標(biāo)題 */ padding-top: 3px; /*設(shè)置表格標(biāo)題的頂部邊距*/
padding-bottom: 4px; /*設(shè)置表格標(biāo)題的底部邊距*/
font-size: 30px; /*表格標(biāo)題字體大小*/
color: red; /*表格標(biāo)題字體顏色*/}
第4步，設(shè)置表格中的單元格樣式。
table th {/*表格的行、列名稱單元格的樣式*/ border: 2px solid #429fff; /*行、列名稱邊框*/
background-color: #d2e8ff; /*行、列名稱單元格的背景顏色*/
font-weight: bold; /*行、列名稱字體加粗*/
padding-top: 4px; /*設(shè)置行、列名稱單元格的上、下、左、右邊距*/
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;}
table td {/*表格單元格樣式*/
border: 2px solid #429fff; /*單元格邊框*/}
以上代碼中，分別設(shè)置了<th>和<td>標(biāo)簽的樣式，對(duì)表格的單元格的背景顏色、邊框樣式進(jìn)行了設(shè)置，從而達(dá)到網(wǎng)頁(yè)設(shè)計(jì)中美化表格的目的。
當(dāng)前文章標(biāo)題：案例實(shí)戰(zhàn)：美化表格
當(dāng)前URL：http://www.gtalker.cn/news/wzzz/3117.html
