正点CSS 实例---表格1

<style>

.datalist{
    border:1px solid #429fff;    /* 表格边框 */
    font-family:Arial;
    border-collapse:collapse;    /* 边框重叠 */
}
.datalist caption{
    padding-top:3px;
    padding-bottom:2px;
    font:bold 1.1em;
    background-color:#f0f7ff;
    border:1px solid #429fff;    /* 表格标题边框 */
}
.datalist th{
    border:1px solid #429fff;    /* 行、列名称边框 */
    background-color:#d2e8ff;
    font-weight:bold;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
    text-align:center;
}
.datalist td{
    border:1px solid #429fff;    /* 单元格边框 */
    text-align:right;
    padding:4px;
    
}

</style>

<table class="datalist">
    <caption>年度收入 2004 - 2007</caption>
    <tr>
        <th></th>
        <th scope="col">2004</th>
        <th scope="col">2005</th>
        <th scope="col">2006</th>
        <th scope="col">2007</th>
    </tr>
    <tr>
        <th scope="row">拨款</th>
        <td>11,980</td>
        <td>12,650</td>
        <td>9,700</td>
        <td>10,600</td>
    </tr>
    <tr>
        <th scope="row">捐款</th>
        <td>4,780</td>
        <td>4,989</td>
        <td>6,700</td>
        <td>6,590</td>
    </tr>
    <tr>
        <th scope="row">投资</th>
        <td>8,000</td>
        <td>8,100</td>
        <td>8,760</td>
        <td>8,490</td>
    </tr>
    <tr>
        <th scope="row">募捐</th>
        <td>3,200</td>
        <td>3,120</td>
        <td>3,700</td>
        <td>4,210</td>
    </tr>
    <tr>
        <th scope="row">销售</th>
        <td>28,400</td>
        <td>27,100</td>
        <td>27,950</td>
        <td>29,050</td>
    </tr>
    <tr>
        <th scope="row">杂费</th>
        <td>2,100</td>
        <td>1,900</td>
        <td>1,300</td>
        <td>1,760</td>
    </tr>
    <tr>
        <th scope="row">总计</th>
        <td>58,460</td>
        <td>57,859</td>
        <td>58,110</td>
        <td>60,700</td>
    </tr>
</table>