HTMLのテーブルにストライプ模様を追加する方法

HTML CSS

HTMLのテーブルにストライプ模様を追加する方法

HTMLのテーブルにストライプ模様を追加する方法について、詳細に説明します。
ここでは、HTMLとCSSを別ファイルに分けて、クラス名やID名を「test-」でプレフィックスした例を示します。
説明は、各ステップごとに分かりやすく解説します。

1. HTMLファイルの作成

まず、HTMLファイルを作成し、テーブルの構造を定義します。
以下の例では、テーブルのクラス名を「test-table」とし、テーブルの行（tr）にストライプ模様を適用するためのクラス名「test-row-odd」と「test-row-even」を使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ストライプテーブルの例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="test-table">
    <thead>
      <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
        <th>ヘッダー3</th>
      </tr>
    </thead>
    <tbody>
      <tr class="test-row-even">
        <td>データ1-1</td>
        <td>データ1-2</td>
        <td>データ1-3</td>
      </tr>
      <tr class="test-row-odd">
        <td>データ2-1</td>
        <td>データ2-2</td>
        <td>データ2-3</td>
      </tr>
      <tr class="test-row-even">
        <td>データ3-1</td>
        <td>データ3-2</td>
        <td>データ3-3</td>
      </tr>
      <!-- 追加の行 -->
    </tbody>
  </table>
</body>
</html>

このHTMLファイルでは、テーブルのヘッダー行を含むtheadセクションと、データ行を含むtbodyセクションを定義しています。
それぞれのデータ行には、ストライプ模様を適用するために、偶数行と奇数行に異なるクラスを付けています。

2. CSSファイルの作成

次に、CSSファイルを作成し、テーブルにストライプ模様を追加します。
以下のコードでは、クラス「test-table」に対して基本的なテーブルのスタイルを設定し、「test-row-even」と「test-row-odd」に対して背景色を指定してストライプ模様を実現しています。

/* styles.css */

.test-table {
  width: 100%;
  border-collapse: collapse;
}

.test-table th,
.test-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.test-table thead {
  background-color: #f4f4f4;
}

.test-row-even {
  background-color: #f9f9f9;
}

.test-row-odd {
  background-color: #e9e9e9;
}

このCSSファイルでは、テーブル全体のスタイルとセルのスタイルを定義しています。
border-collapse: collapse;を使用してテーブルの境界線を統合し、セル内のパディングとテキストの配置を調整します。
test-row-evenクラスとtest-row-oddクラスでは、それぞれ異なる背景色を設定し、ストライプ模様を作成しています。

3. ストライプ模様のカスタマイズ

ストライプ模様の色やパターンは、CSSファイル内でカスタマイズできます。
test-row-evenとtest-row-oddクラスの背景色を変更することで、異なるデザインを実現できます。
以下は、異なる色を使用した例です。

.test-row-even {
  background-color: #f2f2f2;
}

.test-row-odd {
  background-color: #d9d9d9;
}

4. まとめ

HTMLとCSSを分けてストライプ模様を追加する方法について説明しました。
HTMLファイルにはテーブルの構造を定義し、CSSファイルではテーブルにスタイルを適用します。
このアプローチにより、デザインの変更や管理がしやすくなります。