はじめに

HTMLの基本要素のひとつに「table（テーブル）」があります。
表データをきれいに整形するのに便利ですが、最初は「どうやって書くの？」と悩みがち。
この記事では、tableタグの基本から、CSSで見やすく装飾する方法、中央寄せするテクニックまで、初心者向けにわかりやすく解説します。

tableの作り方

まずは、もっともシンプルなtableの書き方を紹介します。

index.html

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td>28</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>鈴木 花子</td>
    <td>34</td>
    <td>デザイナー</td>
  </tr>
</table>

各タグの意味

<table> … テーブル全体を囲む
<tr> … テーブルの行（row）
<th> … 見出しセル（header cell）
<td> … データセル（data cell）
これをブラウザで表示すると、ただの「枠なし表」ができます。

CSSを当てて見やすくする

素のtableは地味なので、CSSで装飾しましょう。
たとえば枠線や背景色をつけると一気に見やすくなります。

style.css

table {
  border-collapse: collapse; /* 枠線を重ねて1本線に */
  width: 60%;
}
th, td {
  border: 1px solid #aaa;
  padding: 8px 12px;
  text-align: left;
}
th {
  background-color: #f5f5f5;
}
tr:nth-child(even) {
  background-color: #fafafa;
}

ポイント解説

border-collapse: collapse; … 枠線の重なりをなくし、きれいな一本線に
tr:nth-child(even) … 偶数行にだけ背景色をつけて視認性アップ
padding … セル内の余白をつけて見やすく

中央寄せにしてみる

テーブル全体をページの中央に寄せたい場合は、marginを使います。
テーブルの中の要素を中央に寄せたい場合は、text-align: center;を使います。

style.css

table {
  /* ここから */
  margin: 30px auto; /* 上下30px、左右自動で中央寄せ */
  /* ここまで追記 */
  border-collapse: collapse;
  width: 60%;
}
th, td {
  /* ここから */
  text-align: center;
  /* ここまで追記 */
  border: 1px solid #aaa;
  padding: 8px 12px;
  text-align: left;
}

先ほどのコードに2行分を追記してください。

最後に

HTMLのtableタグは、基本構造さえ押さえればとてもシンプルです。
CSSを少し工夫するだけで、見やすく＆おしゃれにカスタマイズできます。

表のサイズや色などは用途に合わせて自由にアレンジ
レスポンシブ対応など、発展的な使い方もぜひチャレンジ

「テーブル苦手…」という方も、まずはサンプルをコピペしていじってみるところから始めてみてください！