在表格的學(xué)習(xí)中我們主要了解以下屬性：

border-collapse ---設(shè)置是否把表格邊框合并為單一的邊框。

border-spacing ---設(shè)置分隔單元格邊框的距離。

caption-side --- 設(shè)置表格標(biāo)題的位置。

empty-cells ---設(shè)置是否顯示表格中的空單元格。

table-layout ---設(shè)置顯示單元、行和列的算法。

這里我們只用最常用的屬性，下面我們就邊講邊做實(shí)驗(yàn) 首先呢，我們先創(chuàng)建一個(gè)表格，加入如下內(nèi)容：

<table id="tb">
    <tr>
        <th>name</th>
        <th>age</th>
        <th>number</th>
    </tr>
 
    <tr>
        <td>li</td>
        <td>3</td>
        <td>4</td>
    </tr>
 
    <tr class="tr2">
        <td>li</td>
        <td>3</td>
        <td>4</td>
    </tr>
 
    <tr>
        <td>li</td>
        <td>3</td>
        <td>4</td>
    </tr>
 
    <tr class="tr2">
        <td>li</td>
        <td>3</td>
        <td>4</td>
    </tr>
 
</table>

當(dāng)然這是無邊框的效果，下面我們就在 CSS 中加入邊框并指定顏色（外邊框和內(nèi)邊框）：

#tb,tr,th,td{
    border: 1px solid green;
}

可以看出，效果如下：

這些都是默認(rèn)的屬性，下面我們就通過 CSS 來定制列表。首先，我們先使用 border—collapse 讓整個(gè)列表邊框合并為單線，再使用 width，height 來定制表格大小，之后用 background-color 加上背景顏色，text-align 設(shè)置字符對(duì)其方式，padding 設(shè)置內(nèi)邊據(jù)：

#tb td,th{
    border: 1px solid green;
    padding: 5px;
}
#tb{
    border-collapse: collapse;
    width: 500px;
    text-align: center;
}
 
#tb th{
    text-align: center;
    color: black;
    background-color: lightseagreen;
 
}
#tb tr.tr2 td{
    color: black;
    background-color: #B2FF99;
 
}

效果如下：

?