DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 使用CSS設置表格
使用CSS設置表格
編輯:CSS詳解     

Html代碼:
<body>
    <table class="tableList" width="600" cellspacing="0">
        <caption>江山代有才人出 各領風騷數百年</caption>
        <thead>
            <tr>
                <th>三代</th>
                <th>漢朝</th>
                <th>晉朝</th>
                <th>唐朝</th>
                <th>宋朝</th>
                <th>明朝</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>孔子</td>
                <td>董仲舒</td>
                <td>阮籍</td>
                <td>李白</td>
                <td>蘇轼</td>
                <td>王陽明</td>
            </tr>
            <tr class="odd">
                <td>孟子</td>
                <td>東方朔</td>
                <td>嵇康</td>
                <td>杜甫</td>
                <td>辛棄疾</td>
                <td>唐寅</td>
            </tr>
            <tr>
                <td>老子</td>
                <td>揚雄</td>
                <td>陶淵明</td>
                <td>李商隱</td>
                <td>陸游</td>
                <td>徐渭</td>
            </tr>
            <tr class="odd">
                <td>莊子</td>
                <td>左思</td>
                <td>王羲之</td>
                <td>李賀</td>
                <td>范仲淹</td>
                <td>楊慎</td>
            </tr>
            <tr>
                <td>荀子</td>
                <td>司馬遷</td>
                <td>庾信</td>
                <td>王維</td>
                <td>歐陽修</td>
                <td>呂坤</td>
            </tr>           
            <tr class="odd">
                <td>韓非子</td>
                <td>班固</td>
                <td>鮑照</td>
                <td>白居易</td>
                <td>蘇洵</td>
                <td>宋濂</td>
            </tr>
        </tbody>
    </table>
</body>
CSS代碼:
/**//*2008.09.28*/

Table.tableList{}{
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
    border-left:0px solid #000000;
    border-left:0px solid #000000;
}

Table.tableList caption{}{
    font-size:16px;
    font-weight:bold;
}

Table.tableList thead{}{
    height:31px;
    background:#ffffff url(../img/th_flower_bg.gif) repeat-x left center:
    border-top:1px solid #e0dace;
    border-bottom:1px solid #e0dace;
}

Table.tableList tbody{}{
    height:25px;
}

Table.tableList th{}{
    border-bottom:1px solid #e0dace;
    text-align:center;
}

Table.tableList tr.odd{}{
    background-color:#faf4e8;
}

Table.tableList td{}{   
    border-bottom:1px solid #e0dace;
   
    padding-left:4px;
    padding-right:4px;
    padding-top:4px;
    padding-bottom:1px;   
   
    text-align:left;
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved