HTMLのテーブルにおけるCSSサンプルとその使用方法

HTML CSS

HTMLのテーブルにおけるCSSサンプルとその使用方法

以下は、HTMLのテーブルにスタイルを適用するためのCSSサンプルとその使用方法です。
例として、テーブルに基本的なスタイリングを加え、テーブルの外観を整える方法を示します。

HTMLファイル（index.html）

<!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 class="test-header">項目1</th>
        <th class="test-header">項目2</th>
        <th class="test-header">項目3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="test-cell">データ1</td>
        <td class="test-cell">データ2</td>
        <td class="test-cell">データ3</td>
      </tr>
      <tr>
        <td class="test-cell">データ4</td>
        <td class="test-cell">データ5</td>
        <td class="test-cell">データ6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSSファイル（styles.css）

/* テーブルの基本スタイル */
.test-table {
  width: 100%;
  border-collapse: collapse;
}

.test-header {
  background-color: #f2f2f2;
  color: #333;
  padding: 10px;
  border: 1px solid #ddd;
}

.test-cell {
  padding: 10px;
  border: 1px solid #ddd;
}

/* テーブルの行のホバー効果 */
.test-table tr:hover {
  background-color: #f5f5f5;
}

説明

1. テーブルのスタイル設定:

  • test-tableクラスはテーブル全体に適用され、テーブルの幅を100%にし、border-collapseプロパティでセルの境界線を統合します。

2. ヘッダーのスタイル:

  • test-headerクラスはヘッダーセルに適用され、背景色を設定し、テキストの色を指定します。

また、セルの内側にパディングを追加し、境界線を指定しています。

3. セルのスタイル:

  • test-cellクラスは通常のデータセルに適用され、同様にパディングと境界線を設定します。

4. ホバー効果:

  • テーブル行にホバーした際の背景色を変更するため、test-table tr:hoverセレクタを使用しています。

これにより、ユーザーが行にカーソルを合わせると、背景色が変わります。

このサンプルは基本的なスタイリングを行うもので、実際にはさらに詳細なカスタマイズが可能です。
例えば、フォントサイズやフォントファミリーの設定、行の高さの調整など、様々なプロパティを追加してテーブルの外観を変更することができます。