<output id="jbxdv"></output>

      1. 案例實戰:美化表格

        • 2019-10-28 15:14:25
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

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

        美化表格

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

        c7bf0dfe214c06d622b34d3b822a24fa.jpg

        【操作步驟】

        第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.freenetsites.com/news/wzzz/3117.html

        上一篇:在網頁設計中定義表格樣式

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

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>