HTMLのテーブルのデザインにCSSを適用する方法

HTMLのテーブルのデザインにCSSを適用する方法
- HTMLファイル (index.html)
- CSSファイル (styles.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 class="test-thead">
      <tr>
        <th class="test-th">ヘッダー1</th>
        <th class="test-th">ヘッダー2</th>
        <th class="test-th">ヘッダー3</th>
      </tr>
    </thead>
    <tbody class="test-tbody">
      <tr>
        <td class="test-td">データ1</td>
        <td class="test-td">データ2</td>
        <td class="test-td">データ3</td>
      </tr>
      <tr>
        <td class="test-td">データ4</td>
        <td class="test-td">データ5</td>
        <td class="test-td">データ6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSSファイル (styles.css)

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

.test-thead {
  background-color: #f2f2f2;
}

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

.test-th {
  background-color: #4CAF50;
  color: white;
}

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

.test-td {
  background-color: #ffffff;
}

この例では、テーブル全体に幅を100%指定し、border-collapseを使ってボーダーの重なりをなくしています。
テーブルのヘッダー部 (thead) には背景色を指定し、ヘッダーセル (th) には特別な色とテキストの色を設定しています。
ボディ部 (tbody) のセルには標準的なスタイルを適用し、nth-childを使用して偶数行の背景色を変更しています。

このようにすることで、テーブルが見やすく、視覚的に整ったデザインになります。
また、CSSファイルを分けることで、スタイルの管理がしやすく、HTMLの構造を保ちつつ、スタイルを簡単に変更することができます。