HTMLのテーブルにしましま模様を適用する方法

HTML CSS

HTMLのテーブルにしましま模様を適用する方法

HTMLのテーブルにしましま模様を適用する方法について、以下の説明をします。
HTMLとCSSは別々のファイルで提供し、クラス名やID名には「test-」を接頭辞として使用します。

1. HTMLファイル

まず、HTMLファイルを作成します。
以下の例では、テーブルに「test-striped」クラスを適用しています。
これにより、CSSで指定したしましま模様が適用されます。

<!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-striped">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
      <tr>
        <td>データ4</td>
        <td>データ5</td>
        <td>データ6</td>
      </tr>
      <tr>
        <td>データ7</td>
        <td>データ8</td>
        <td>データ9</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

このHTMLコードでは、テーブルのクラスとして「test-striped」を指定しています。
これにより、CSSで設定したスタイルが適用されます。

2. CSSファイル

次に、CSSファイルを作成します。
以下の例では、テーブルのしましま模様を作成するためのスタイルを「test-striped」クラスに適用しています。

/* styles.css */
.test-striped {
  width: 100%;
  border-collapse: collapse;
}

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

.test-striped tr:nth-child(even) {
  background-color: #f2f2f2;
}

.test-striped tr:hover {
  background-color: #ddd;
}

ここでは、テーブル全体に「test-striped」クラスを適用しています。
特に注目すべきは、nth-child(even)セレクタを使って、偶数行に異なる背景色を設定している点です。
これにより、しましま模様が表示されます。
また、tr:hoverセレクタを使って、マウスオーバー時に行の背景色が変わるようにしています。

解説

  • width: 100%：テーブルの幅を親要素（通常はページ全体）の幅に合わせます。
  • border-collapse: collapse：テーブルの境界線を一つにまとめることで、セル間の境界線が重ならないようにします。
  • border: 1px solid #ddd：テーブルセルの境界線を1ピクセルの実線にし、色を薄いグレーに設定します。
  • padding: 8px：セル内のテキストに8ピクセルの余白を追加します。
  • text-align: left：セル内のテキストを左揃えにします。
  • nth-child(even)：偶数行に背景色を適用し、しましま模様を作成します。
  • hover：マウスオーバー時に背景色を変更することで、ユーザーが行にカーソルを合わせた際の視覚的フィードバックを提供します。

この方法により、シンプルで視覚的にわかりやすいしましま模様をHTMLテーブルに適用することができます。