HTMLテーブルの基本構造とCSSでおしゃれに装飾するポイント完全ガイド

1. HTMLテーブルとは？情報の整理整頓術

1. HTMLテーブルとは？情報の整理整頓術

HTMLのテーブルとは、情報を「行」と「列」に分けて表示するための仕組みです。Excelなどの表計算ソフトをイメージしてください。Webサイトでは、料金表、スケジュール、比較リストなど、情報を分かりやすく並べたいときに大活躍します。

HTMLはWebサイトの構造を作るための言葉で、テーブル（表）を作るには専用のタグという命令を使います。最初は難しく感じるかもしれませんが、一度ルールを覚えてしまえば、どんなに長いデータでもきれいに整理できるようになります。まずは骨組みの作り方を見ていきましょう。

2. テーブルの基本構造を作るタグの役割

2. テーブルの基本構造を作るタグの役割

テーブルを作るには、いくつかのタグを組み合わせます。「table」が表全体、「tr」が行、「th」が見出しセル、「td」がデータのセルです。これらを入れ子（箱の中に箱を入れるような関係）にして組み立てていきます。この構造がしっかりしていないと、後からCSSでデザインを変えるときに困ってしまうので、基本を丁寧に学びましょう。

<table>
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
  </tr>
</table>

3. CSSで枠線を引いて見やすくする

3. CSSで枠線を引いて見やすくする

HTMLで作っただけのテーブルは、枠線がなく文字がバラバラに見えてしまいます。そこで「CSS」を使って枠線を引きます。CSSはWebサイトに色や大きさ、配置などを指示するデザイン用の言葉です。これを使うと、ただの文字の羅列が、一気に「表」らしくなります。

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #333;
    padding: 8px;
  }
</style>

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中さん</td>
    <td>25</td>
  </tr>
</table>

4. ストライプ柄で読みやすさをアップ

4. ストライプ柄で読みやすさをアップ

長い表の場合、行が区別しにくいことがあります。そんなときは、奇数行と偶数行で色を変える「ストライプ柄（シマシマ模様）」のデザインがおすすめです。CSSの「nth-child」という機能を使うと、プログラムで自動的に色を塗り分けることができます。

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

<table>
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>設定1</td>
    <td>有効</td>
  </tr>
  <tr>
    <td>設定2</td>
    <td>無効</td>
  </tr>
</table>

5. マウスホバーで注目させるデザイン

5. マウスホバーで注目させるデザイン

表の中の情報を詳しく見たいとき、マウスを乗せた行だけ色が変わるようにすると、ユーザーは「今、どこのデータを見ているのか」が分かりやすくなります。これは「ホバーエフェクト」と呼ばれる手法で、Webサイトの使い心地を向上させるためにとても効果的です。

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

<table>
  <tr>
    <th>ID</th>
    <th>名前</th>
  </tr>
  <tr>
    <td>001</td>
    <td>佐藤さん</td>
  </tr>
</table>

6. スマホ対応！レスポンシブなテーブル

6. スマホ対応！レスポンシブなテーブル

最近はスマホでWebサイトを見る人が増えています。しかし、パソコン用の広い表をそのままスマホで見せると、横幅が足りずにはみ出してしまいます。画面幅に応じて表を横にスライドできるようにする工夫を「レスポンシブ対応」と呼びます。

CSSで「overflow-x: auto」という設定をすると、スマホで見てもきれいに収まります。せっかく作った表がスマホで崩れてしまうのはもったいないので、この工夫は必ず取り入れておきましょう。

7. ユーザーにとって親切な表を作る心がけ

7. ユーザーにとって親切な表を作る心がけ

テーブルを作る際に忘れてはいけないのが、読みやすさへの配慮です。文字が小さすぎたり、行間が詰まりすぎていたりすると、ユーザーは疲れてしまいます。少し余裕を持った余白（パディング）をとるだけで、驚くほど見やすい表に変わります。

また、見出しである「thタグ」には太字を適用したり、背景色を少し変えたりして、データと区別するのも良い方法です。HTMLの基本ルールを守りつつ、CSSであなたなりの工夫を凝らす。その積み重ねが、誰にとっても分かりやすい、素晴らしいWebサイトを作ることにつながります。

8. 構造とデザインを分けることの重要性

8. 構造とデザインを分けることの重要性

HTMLは「中身（文章の構造）」、CSSは「見た目（デザイン）」という役割分担がWeb制作の基本です。テーブルのコードを書くときは、最初に中身をしっかり作ってから、後でCSSで飾り付けをするようにしましょう。この意識を持つだけで、コードの管理が劇的に楽になり、トラブルも少なくなります。

最初はタグが多くて混乱するかもしれませんが、一つひとつ順番に書いていけば必ずできるようになります。ブラウザという窓を通して、自分が書いたコードが形になっていく様子を見るのは、何にも代えがたい楽しさがあります。失敗を恐れず、何度も修正しながら、自分だけのテーブルを作ってみてください。