HTML テーブルのスタイリング

HTMLテーブルの見た目を劇的に改善し、データの可読性を向上させるためには、CSSによるスタイリングが不可欠です。

1. ゼブラストライプ (Zebra Stripes)

大量のデータを扱うテーブルでは、1行おきに背景色を変えるゼブラストライプ（縞模様）を適用することで、ユーザーが横方向のデータを追いやすくなります。

これを実現するには、CSSの :nth-child(even) または :nth-child(odd) セレクタを使用します。

<style>
tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

<table>
  <tr>
    <th>名前</th>
    <th>苗字</th>
    <th>ポイント</th>
  </tr>
  <tr>
    <td>太郎</td>
    <td>田中</td>
    <td>50</td>
  </tr>
  <tr>
    <td>花子</td>
    <td>佐藤</td>
    <td>94</td>
  </tr>
  <tr>
    <td>次郎</td>
    <td>鈴木</td>
    <td>67</td>
  </tr>
</table>

2. 水平区切り線 (Horizontal Dividers)

表全体の枠線を囲まず、各行の下側だけに境界線を引くデザインは、モダンでクリーンな印象を与えます。

border-bottom プロパティを th と td に適用することで、水平方向の区切り線を作成できます。

th, td {
  border-bottom: 1px solid #ddd;
}

デフォルトでは border-collapse: collapse; を併用しないと線が二重に見える場合があるため、注意が必要です。

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

ユーザーが現在どの行を見ているかを視覚的にフィードバックするために、マウスカーソルを合わせた際に行の背景色を変える Hover効果 を追加します。

<style>
tr:hover {
  background-color: #D6EEEE;
}
</style>

この設定により、インタラクティブ性が向上し、データの誤読を防ぐことができます。

4. レスポンシブなテーブル (Responsive Table)

画面幅の狭いモバイル端末では、列の多いテーブルは画面からはみ出してしまうことがあります。レスポンシブな対応として、テーブルを横方向にスクロール可能にするのが最も一般的な解決策です。

これを実装するには、<table> 要素を <div> 要素で囲み、その <div> に対して overflow-x: auto を指定します。

<div style="overflow-x:auto;">

<table>
  <tr>
    <th>名前</th>
    <th>苗字</th>
    <th>メールアドレス</th>
    <th>住所</th>
    <th>電話番号</th>
    <th>国</th>
  </tr>
  <tr>
    <td>太郎</td>
    <td>田中</td>
    <td>[email protected]</td>
    <td>東京都千代田区</td>
    <td>090-0000-0000</td>
    <td>日本</td>
  </tr>
  </table>

</div>

5. まとめ

HTMLテーブルのスタイリングにおける主要なテクニックのまとめです。

これらのプロパティを組み合わせることで、単なる「表」を、使いやすく洗練された UI（ユーザーインターフェース） へと昇華させることが可能です。