CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでゼブラストライプ（縞模様）テーブルを作成する方法

CSSでゼブラストライプ（縞模様）テーブルを作成するには、:nth-child(even) 疑似クラスを使って偶数行に背景色を設定します。これにより、表の行が交互に色分けされ、データが格段に読みやすくなります。以下に具体的なコード例を示します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }
    th, td {
        font-weight: bold;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 18px;
        text-align: left;
        padding: 16px;
    }
    tr:nth-child(even) {
        background-color: #8b8b8b;
        color: white;
    }
</style>
</head>
<body>
<h1>Zebra Striped Table Example</h1>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>BirthMonth</th>
</tr>
<tr>
<td>Jack</td>
<td>Roy</td>
<td>January</td>
</tr>
<tr>
<td>Steve</td>
<td>Smith</td>
<td>March</td>
</tr>
<tr>
<td>Brandon</td>
<td>Anderson</td>
<td>February</td>
</tr>
</table>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSでゼブラストライプ（縞模様）テーブルを作成する方法

ポイント解説

  • border-collapse: collapse;：隣接するセルの境界線を1本にまとめ、すっきりとした外観にします。
  • tr:nth-child(even)：偶数番目の行（2行目・4行目…）にのみスタイルを適用します。奇数行を着色したい場合は odd に変更してください。
  • background-color と color：背景色をグレー（#8b8b8b）、文字色を白に設定することで、縞模様のコントラストがはっきりします。
  • padding: 16px;：セル内に余白を設けることで、テーブル全体の可読性が向上します。

このように、CSSの擬似クラスを1行追加するだけで、JavaScriptなどに頼らず簡単にゼブラストライプテーブルを実装できます。サイトのデザインに合わせて、背景色や文字色を自由にカスタマイズしてみてください。

  1. CSSでレスポンシブ対応の価格表を作成する方法【サンプルコード付き】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブ対応の価格表（料金テーブル）を簡単に作成できます。本記事では、メディアクエリとfloatレイアウトを組み合わせた実装方法を、実際に動作するサンプルコードとともに分かりやすく解説します。レスポンシブ価格表のサンプルコード以下は、無料プランと上位プランの2つの価格表を並べて表示し、画面幅が狭くなると自動的に縦積みレイアウトへ切り替わる完全なHTML・CSSコードです。<!DOCTYPE html> <html> <head> <meta name="viewport&qu

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>