テーブルの學(xué)習(xí)では、主に次の屬性を理解します:

border-collapse --- テーブルの境界線を 1 つの境界線に結(jié)合するかどうかを設(shè)定します。

border-spacing ---セルの境界線を區(qū)切る距離を設(shè)定します。

caption-side --- 表のタイトルの位置を設(shè)定します。

empty-cells ---表內(nèi)の空のセルを表示するかどうかを設(shè)定します。

table-layout ---セル、行、列を表示するためのアルゴリズムを設(shè)定します。

ここでは、最も一般的に使用される屬性のみを使用します。まず、テーブルを作成し、次の內(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>

もちろん、これを CSS Border に追加して、 color (外側(cè)の境界線と內(nèi)側(cè)の境界線):

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

ご覧のとおり、効果は次のとおりです:

次に、CSS を使用してリストをカスタマイズします。まず、最初に border-collapse を使用してリストの境界線全體を 1 行に結(jié)合し、次に幅と高さを使用して表のサイズをカスタマイズし、次に、background-color を使用して背景色を追加し、text-align を使用して文字の配置を設(shè)定します。內(nèi)側(cè)の境界線を設(shè)定するためのパディング:

#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;
 
}

効果は次のとおりです: