CSS テーブル (Tables)

CSSを使用すると、HTMLテーブルの見た目を大幅に改善できます。

1. CSS テーブルの枠線 (CSS Table Borders)

テーブルに枠線を指定するには、CSSの border プロパティを使用します。

以下の例では、table、th、および td 要素に対して黒色の実線ボーダーを指定しています。

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

1.1 テーブルの全幅設定 (Full-Width Table)

テーブルを画面（またはコンテナ）の幅いっぱいに広げる必要がある場合は、width: 100% を追加します。

table {
  width: 100%;
}

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

2. 枠線の結合 (Collapse Table Borders)

デフォルトでは、table と th/td の両方にボーダーを設定すると、二重の枠線が表示されます。border-collapse プロパティを使用すると、これらを1本の線に結合できます。

table {
  border-collapse: collapse; /* 枠線を一本に結合 */
}

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

テーブルの周囲だけに枠線が欲しい場合は、table のみに border を指定します。

3. テーブルの幅と高さ (Table Width and Height)

テーブルの幅（width）と高さ（height）はプロパティで定義されます。

以下の例では、テーブルの幅を 100% に、th（ヘッダーセル）の高さを 70px に設定しています。

table {
  width: 100%;
}

th {
  height: 70px;
}

4. テーブルのアライメント (Table Alignment)

テーブル内のコンテンツの配置を制御します。

4.1 水平方向の配置 (Horizontal Alignment)

text-align プロパティは、th または td 内のコンテンツの水平方向（左、右、中央）の配置を設定します。デフォルトでは、<th> の内容は中央揃え、<td> の内容は左揃えになります。

td {
  text-align: center; /* 中央揃え */
}

4.2 垂直方向の配置 (Vertical Alignment)

vertical-align プロパティは、コンテンツの垂直方向（上、下、中央）の配置を設定します。デフォルトでは、セル内のコンテンツは中央揃え（middle）になります。

td {
  height: 50px;
  vertical-align: bottom; /* 下揃え */
}

5. テーブルのパディング (Table Padding)

セル内のコンテンツと枠線の間にスペースを作るには、th および td 要素に padding プロパティを使用します。

th, td {
  padding: 15px;
  text-align: left;
}

6. 水平方向の区切り線 (Horizontal Dividers)

セルの周囲すべてに枠線を引くのではなく、各行の下側にのみボーダーを指定することで、モダンな区切り線スタイルを作成できます。

th, td {
  border-bottom: 1px solid #ddd; /* 下線のみ指定 */
}

7. ホバー可能なテーブル (Hoverable Table)

tr:hover セレクタを使用すると、行（<tr>）の上にマウスを置いたときにその行をハイライトさせることができます。

tr:hover {
  background-color: #f5f5f5; /* ホバー時の背景色 */
}

8. ゼブラ柄のテーブル (Zebra-Striped Tables)

視認性を高めるために、1行おきに背景色を変える「ゼブラ柄（ストライプ）」を作成するには、nth-child() セレクタを使用します。

tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行の背景色 */
}

9. テーブルの色 (Table Color)

テーブルのヘッダーに背景色を付け、テキストの色を白にするなど、デザインに合わせてカスタマイズします。

th {
  background-color: #04AA6D;
  color: white;
}

10. レスポンシブ・テーブル (Responsive Table)

画面幅が狭いデバイスでテーブルがはみ出してしまうのを防ぐために、レスポンシブ対応を行います。
テーブルを包むコンテナ要素（<div> など）に overflow-x: auto を追加することで、画面幅が足りない場合に水平スクロールバーが表示されるようになります。

<div style="overflow-x:auto;">
  <table>
    ...コンテンツ...
  </table>
</div>

11. すべてのテーブルプロパティ一覧