HTMLのテーブルのボーダーの色を設定する方法

HTML CSS

HTMLのテーブルのボーダーの色を設定する方法

HTMLのテーブルのボーダーの色を設定するには、HTMLファイルとCSSファイルの2つを使います。
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 {
  border-collapse: collapse; /* ボーダーの重なりを解消 */
  width: 100%; /* テーブルの幅を100%に設定 */
}

.test-table th, .test-table td {
  border: 2px solid #3498db; /* ボーダーの幅と色を設定 */
  padding: 8px; /* セルの内側にスペースを追加 */
}

.test-header {
  background-color: #ecf0f1; /* ヘッダーの背景色を設定 */
  color: #2c3e50; /* ヘッダーのテキスト色を設定 */
}

.test-cell {
  background-color: #fff; /* セルの背景色を設定 */
  color: #2c3e50; /* セルのテキスト色を設定 */
}

/* テーブルにホバー効果を追加 */
.test-table tr:hover {
  background-color: #f5f5f5; /* 行にホバーしたときの背景色を設定 */
}

説明

1. HTMLファイル:
テーブルの構造を定義しています。
テーブルはtest-tableというクラスが付けられたtable要素で、ヘッダーにはtest-headerクラス、セルにはtest-cellクラスが付けられています。

2. CSSファイル:

  • .test-table: テーブル全体のスタイルを設定します。

border-collapseプロパティでボーダーの重なりを解消し、テーブルの幅を100%に設定しています。

  • .test-table th, .test-table td: ヘッダーとセルのボーダーを2pxの幅で、色は#3498db（青色）に設定しています。

また、セルの内側に8pxのスペースを追加しています。

  • .test-header: ヘッダーセルの背景色を#ecf0f1（薄いグレー）、テキスト色を#2c3e50（濃いグレー）に設定しています。
  • .test-cell: セルの背景色を白にし、テキスト色を同様に濃いグレーに設定しています。
  • .test-table tr:hover: テーブルの行にホバーしたときの背景色を設定し、視覚的なフィードバックを提供しています。

このように、HTMLとCSSを分けてボーダーの色を設定することで、コードが整然とし、保守性が高くなります。
CSSでのスタイリングにより、テーブル全体のデザインを一元管理できるため、テーブルの見た目を簡単に変更できます。