CSSでテーブルのスタイルを設定する方法

Web デザインでは、テーブルはよく使用される要素の 1 つです。テーブルを使用すると、情報やデータをより適切に表示できます。しかし、表を使用する場合、スタイルを設定しないと単調で退屈なページになり、情報が伝わりにくくなります。そこで、この記事ではCSSを使って表のスタイルを設定する方法を紹介します。

1. テーブルの基本スタイルを設定する

table タグを使用してテーブルを定義し、CSS を使用してそのスタイルを設定できます。最も基本的なテーブルのコード例を次に示します:

<table>
    <tr>
        <th>数字</th>
        <th>字母</th>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <td>B</td>
    </tr>
</table>

このコードは、2 つの列と 3 つの行を含むテーブルを定義します。上の行はヘッダーで、下の 2 行はテーブルの内容です。次に、表の境界線、セルのパディング、セル間の距離 (セル間隔) の設定など、表の基本スタイルを設定できます。

table {
    border-collapse: collapse;  /* 合并边框 */
    border-spacing: 0;  /* 设置单元格之间的距离为 0 */
    width: 100%;
}

th, td {
    padding: 8px;  /* 设置单元格内边距 */
    border: 1px solid #ccc;  /* 设置边框 */
}

上記のコードでは、border-collapse:collapse を使用してテーブルの境界線を結合し、見た目をすっきりさせました。 border-spacing: 0 表をよりコンパクトに見せるには、セル間の距離を 0 に設定します。 width: 100% を設定すると、テーブルをブラウザ ウィンドウのサイズに適応させることができます。次に、th,td セレクターを使用してセルのスタイルを設定します。 padding: 8px を設定すると、セルのパディング サイズを調整して、表の内容をより美しくすることができます。 境界線: 1px 実線 #ccc を設定します。セルの境界線を設定できます。ここでは灰色 (#ccc) が使用されます。

2. ヘッダー スタイルを設定する

ヘッダーはテーブルの重要な部分であり、通常は <th> 要素としてマークされます。ヘッダーを個別にスタイル設定できます。

th {
    background-color: #f2f2f2;  /* 设置表头背景颜色 */
    font-weight: bold;  /* 设置表头文本加粗 */
    text-align: left;  /* 设置表头文本左对齐 */
}

上記のコードでは、background-color: #f2f2f2 を使用してテーブル ヘッダーの背景色を設定します。 font-weight:bold を設定すると、ヘッダー テキストを太字にして、より目立つようにすることができます。 text-align: left を使用して、ヘッダー テキストを左揃えにします。

3. テーブルの交互行スタイルを設定する

テーブルを読みやすくするために、テーブルの奇数行と偶数行に交互スタイルを設定できます。

tr:nth-child(even) {
    background-color: #f2f2f2;  /* 设置偶数行背景颜色 */
}

上記のコードでは、nth-child(even) 疑似クラス セレクターを使用してテーブルの偶数行を選択し、その背景色を灰色 (# f2f2f2) 。

4. テーブルのマウスオーバー状態のスタイルを設定する

マウスがテーブルの行の上にあるときに、さまざまなスタイルを設定して対話性を高めることができます。

tr:hover {
    background-color: #ddd;  /* 设置鼠标悬停状态的背景颜色 */
}

上記のコードでは、hover 疑似クラス セレクターを使用して、マウスを置いた行を選択し、その背景色を灰色 (#ddd) に設定します。

上記の手順により、テーブルのスタイルを設定して、より美しく明確にすることができます。もちろん、フォントサイズや色の調整など、ニーズに応じてさらにスタイル設定を行うこともできます。一般に、表のスタイルを設定すると、ページがよりカラフルになり、読みやすく理解しやすくなります。

以上がCSSでテーブルのスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。