案例實戰(zhàn):美化表格

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

本節(jié)將通過實例的形式幫助讀者設計CSS的表格樣式,以提高實戰(zhàn)技法和技巧,快速理解CSS表格屬性的應用。

美化表格

在之前的章節(jié)中介紹了CSS可設置的表格顏色和表格邊框樣式,本節(jié)通過一個簡單的實例來介紹在網(wǎng)站建設時通過CSS美化的方法。本節(jié)將通過實例的形式幫助讀者設計CSS的表格樣式,以提高實戰(zhàn)技法和技巧,快速理解CSS表格屬性的應用。整個網(wǎng)頁設計效果如圖所示。

c7bf0dfe214c06d622b34d3b822a24fa.jpg

【操作步驟】

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

<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">第一節(jié)</th>           /*表格行名稱*/        

<td>數(shù)學</td>        

<td>數(shù)學</td>        

<td>語文</td>        

<td>英語</td>        

<td>英語</td>    

</tr>    

<tr>        

<th scope="row">第二節(jié)</th>     

<td>數(shù)學</td>        

<td>數(shù)學</td>        

<td>語文</td>        

<td>英語</td>        

<td>英語</td>    

</tr>    

<tr>        

<th scope="row">第三節(jié)</th>        

<td>數(shù)學</td>        

<td>語文</td>        

<td>語文</td>        

<td>美術(shù)</td>        

<td>音樂</td>    

</tr>    

<tr>        

<th scope="row">第四節(jié)</th>        

<td>信息</td>        

<td>地理</td>        

<td>歷史</td>        

<td>英語</td>        

<td>數(shù)學</td> 

</tr>    

<tr>        

<th scope="row">第五節(jié)</th>        

<td>生物</td>        

<td>歷史</td>        

<td>體育</td>        

<td>物理</td>        

<td>語文</td>    

</tr>    

<tr>        

<th scope="row">第六節(jié)</th>        

<td>化學</td>        

<td>數(shù)學</td>        

<td>歷史</td>        

<td>英語</td>        

<td>地理</td>    

</tr>    

<tr>        

<th scope="row">第七節(jié)</th>        

<td>生物</td>        

<td>數(shù)學</td>    

<td>語文</td>        

<td>美術(shù)</td>        

<td>英語</td>    

</tr></table>

第2步,規(guī)劃整個頁面的基本顯示屬性以及設置表格樣式。在<head>標簽內(nèi)添加<styletype="text/ css">標簽,定義一個內(nèi)部樣式表,然后輸入下面樣式:

body {/*網(wǎng)頁基本樣式類*/    

background-color: #f8e6e6;     /*網(wǎng)頁背景顏色*/    

margin: 50px;                  /*表格四周補白*/}table {/*表格樣式*/    

border: 6px double #3186dd;    /*表格邊框*/    

font-family: Arial;    text-align: center;            /*表格中文字水平居中對齊*/    

border-collapse: collapse;     /*邊框重疊 */}

此時可以看到,網(wǎng)頁背景顏色發(fā)生了改變,并且表格添加了邊框。

第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>標簽的樣式,對表格的單元格的背景顏色、邊框樣式進行了設置,從而達到網(wǎng)頁設計中美化表格的目的。

當前文章標題:案例實戰(zhàn):美化表格

當前URL:http://m.supportcoffeeroasters.com/news/wzzz/3117.html

上一篇:在網(wǎng)頁設計中定義表格樣式

下一篇:如何在網(wǎng)頁設計中設計清晰、醒目的表格

網(wǎng)站建設、網(wǎng)絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)