久久精品国产亚洲AV成人婷婷_性色av不卡无码一区二区_人妻无码久久影视_久久精品国产免费一卡二卡

案例實(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ì)效果如圖所示。

c7bf0dfe214c06d622b34d3b822a24fa.jpg

【操作步驟】

第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>           /*表格列名稱(chēng)*/        

<th scope="col">星期二</th>        

<th scope="col">星期三</th>        

<th scope="col">星期四</th>        

<th scope="col">星期五</th>    

</tr>    <tr>        

<th scope="row">第一節(jié)</th>           /*表格行名稱(chēng)*/        

<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 {/*表格的行、列名稱(chēng)單元格的樣式*/ border: 2px solid #429fff;               /*行、列名稱(chēng)邊框*/    

background-color: #d2e8ff;               /*行、列名稱(chēng)單元格的背景顏色*/    

font-weight: bold;                       /*行、列名稱(chēng)字體加粗*/    

padding-top: 4px; /*設(shè)置行、列名稱(chēng)單元格的上、下、左、右邊距*/    

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ì)中美化表格的目的。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))