CSS テーブル

CSSマニュアル

2023.04.11

CSSを使って、HTMLテーブルのデザインをカスタマイズすることができます。

テーブルのボーダーの設定

テーブルのボーダーを設定するには、borderプロパティを使用します。ボーダーの太さ、スタイル、および色を設定できます。

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
}

テーブルセルのパディングを設定するには、paddingプロパティを使用します。

th, td {
  padding: 8px;
}

テーブルヘッダー（th）にスタイルを適用することができます。たとえば、背景色やフォントの太さを設定できます。

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

奇数行と偶数行の背景色を交互に設定するには、:nth-child擬似クラスを使用します。

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #ffffff;
}

テーブルの行にホバーエフェクトを追加するには、:hover擬似クラスを使用します。

つまり、テーブルの行やセルにマウスカーソルが乗っている時にスタイルを変えることができます。

tr:hover {
  background-color: #ddd;
}