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