CSS テーブルの境界プロパティの調査: border-collapse と border-spacing

CSS テーブルの境界プロパティの探索: border-collapse と border-spacing

Web 開発では、テーブルはデータの表示と整理に使用される一般的な要素です。表をより読みやすく、美しくするために、CSS を使用して表のスタイルを調整できます。表のスタイルを調整する場合、border-collapse と border-spacing の 2 つの非常に一般的に使用されるプロパティです。

1. border-collapse: 境界線の結合

border-collapse プロパティは、テーブルの境界線を 1 つの境界線に結合するかどうかを制御するために使用されます。オプションの値は 2 つあります。

• collapse: 境界線が 1 つの境界線にマージされることを示します。これはデフォルト値です。
• セパレート: 境界線が分離されたままであることを示します。

以下はサンプル コードです:

<style>
    table {
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
    }
</style>

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

上記のコードを実行すると、テーブル内の境界線が 1 つの境界線にマージされていることがわかります。

2. border-spacing: 境界線の間隔

border-spacing プロパティは、テーブルの境界線間の距離を制御するために使用されます。次の構文を使用して、水平方向と垂直方向の間隔を設定するために使用できます:

border-spacing: 水平间距 垂直间距;

サンプル コードは次のとおりです:

<style>
    table {
        border-collapse: separate;
        border-spacing: 10px;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
    }
</style>

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

上記のコードを実行すると、間に 10 ピクセルが生成されることがわかります。テーブルの境界線のピッチ。

要約すると、border-collapse と border-spacing は、表の境界線を調整するための CSS の 2 つの重要なプロパティです。 border-collapse はテーブルの境界線を結合するかどうかを制御するために使用され、border-spacing は境界線間の距離を制御するために使用されます。実際のアプリケーションでは、ニーズに応じて適切な値を選択し、表のスタイルと読みやすさを最適化できます。

この記事が CSS テーブルの境界線のプロパティを理解するのに役立つことを願っています。

以上がCSS テーブルの境界プロパティの調査: border-collapse と border-spacingの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。