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