【6日でできるHTML入門】表を活用したレイアウト

　HTMLの<table>や<tr>、<td>といったタグは、データを表形式で示すだけでなく、ページ内の文字や画像を縦横にきっちり整列させたり、セルの結合を利用して柔軟なレイアウトを組んだりするときにも非常に便利です。CSSだけではレイアウトが難しい場合でも、表を利用することで複雑な配置を比較的簡単に実現できます。ここでは、

  • 表を使った文字の整列
  • 表を使った画像の整列
  • 表を使ったページレイアウト

といった具体的な活用例を順に解説していきます。

ここで登場する主なタグをまとめると、以下のようになります。

タグ用途
<table>表全体の範囲を指定
<tr>表の各行（row）を定義
<td>各行のセル（column）を定義

　まず枠線なしのシンプルな表で文字を整列させる方法から始め、次に画像を格子状に並べるテクニック、そしてセルの結合やクラス指定を組み合わせた本格的なレイアウト例まで、実際のHTMLとCSSコードを示しながら丁寧にご紹介します。読み終えるころには、表を“ただのデータ表示”以上のレイアウトツールとして使いこなせるようになるでしょう。

１．表を活用した文字の整列

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

table-based-layoutダウンロード
りんごオレンジバナナメロンスイカマンゴーさくら寺

1.1. 概要

　HTMLの表を用いると、文字列を縦横にグリッド状に揃えて配置できます。特に、枠線を非表示にした状態で使うと、複雑なCSSを使わずに均等割付や上下位置の調整が簡単に実現できます。

1.2. サンプル：果物リスト 🍎

以下は、1行３列の表を使って果物名を３つのカラムに均等に並べ、セル内で「上揃え」にした例です。

ファイル名： lesson24-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🍎果物リスト</title>
  <style>
    table {
      border-collapse: collapse; /* 枠線なし */
    }
    td {
      width:120px;              /* カラム幅を固定 */
      padding-left:15px;        /* 左に余白 */
      vertical-align: top;      /* 上揃え */
      line-height: 1.5;         /* 行間 */
    }
  </style>
</head>
<body>
  <h1>人気の果物</h1>
  <table>
    <tr>
      <td>りんご<br>オレンジ<br>バナナ<br>ぶどう<br>キウイ</td>
      <td>マンゴー<br>パイナップル<br>メロン<br>スイカ<br>パパイヤ</td>
      <td>ピーチ<br>さくらんぼ<br>いちご<br>ブルーベリー<br>ラズベリー</td>
    </tr>
  </table>
</body>
</html>

ブラウザの出力例

  • <table>…表全体を囲む
  • <tr>…1行を定義
  • <td>…セル（列）を定義

２．表を活用した写真の整列

2.1. 概要

　写真ギャラリーをグリッド状に配置したいときにも表は有効です。セルに固定サイズを指定し、上下・左右の揃えや余白で見せ方をコントロールします。

2.2. サンプル：フルーツ写真ギャラリー 🖼️

3列×2行の表で写真とキャプションを並べ、背景と余白でデザインした例です。

ファイル名： lesson24-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🖼️フルーツ写真ギャラリー</title>
  <style>
    body {
      background: #f0f0f0;
      color: #333;
    }
    table {
      border-collapse: collapse;
      margin: 20px auto;
    }
    /* 写真用セル */
    td.imgCell {
      width:200px; height:200px;
      text-align: center;        /* 横中央 */
      vertical-align: bottom;    /* 下揃え */
      background: #fff;
    }
    /* キャプション用セル */
    td.captionCell {
      padding-bottom:20px;
      text-align: center;
      background: #fff;
    }
  </style>
</head>
<body>
  <h1 style="text-align:center;">🖼️フルーツ写真ギャラリー</h1>
  <table>
    <tr>
      <td class="imgCell"><img src="image1.png" alt="りんご" width="180"></td>
      <td class="imgCell"><img src="image2.png" alt="オレンジ" width="180"></td>
      <td class="imgCell"><img src="image3.png" alt="バナナ" width="180"></td>
    </tr>
    <tr>
      <td class="captionCell">りんご</td>
      <td class="captionCell">オレンジ</td>
      <td class="captionCell">バナナ</td>
    </tr>
    <tr>
      <td class="imgCell"><img src="image4.png" alt="メロン" width="180"></td>
      <td class="imgCell"><img src="image5.png" alt="スイカ" width="180"></td>
      <td class="imgCell"><img src="image6.png" alt="マンゴー" width="180"></td>
    </tr>
    <tr>
      <td class="captionCell">メロン</td>
      <td class="captionCell">スイカ</td>
      <td class="captionCell">マンゴー</td>
    </tr>
  </table>
</body>
</html>

ブラウザの出力例

３．表を活用したレイアウト

3.1. 概要

　セルの結合（colspan/rowspan）やクラス指定を組み合わせると、記事内の紹介ブロックやカード型レイアウトなど、通常のCSSだけでは手間のかかる構造を簡単に作成できます。

3.2. サンプル：観光スポット紹介 🏞️

　2行×3列の表ですが、左上セルを横に２つ結合し、背景色や余白で見出し・カテゴリ・本文をレイアウトした例です。

ファイル名： lesson24-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🏞️観光スポット紹介</title>
  <style>
    table {
      border-collapse: collapse;
      width: 600px;
      margin: 20px auto;
    }
    /* 見出しセル */
    td.header {
      background-color: #336633;
      color: #fff;
      padding: 10px 15px;
      font-size: 18pt;
      font-weight: bold;
    }
    /* カテゴリセル */
    td.category {
      background-color: #336633;
      color: #fff;
      padding: 10px 15px;
      width: 60px;
      text-align: right;
      font-weight: bold;
    }
    /* 画像セル */
    td.image {
      background-color: #eeeecc;
      padding: 10px;
      vertical-align: top;
    }
    /* 本文セル */
    td.text {
      background-color: #eeeecc;
      padding: 10px;
      width: 300px;
      vertical-align: top;
      font-size: 10pt;
    }
  </style>
</head>
<body>
  <h1 style="text-align:center;">🏞️観光スポット紹介</h1>
  <table>
    <tr>
      <td colspan="2" class="header">さくら寺</td>
      <td class="category">寺院</td>
    </tr>
    <tr>
      <td class="image"><img src="sakura.png" alt="さくら寺の本堂" width="200"></td>
      <td class="text">
        江戸時代に建立された由緒ある寺院で、春には境内の桜が美しく咲き誇ります。<br>
        世界遺産「日本の桜名所１００選」にも選出。<br>
        所在地：京都府京都市東山区桜町<br>
        アクセス：京都駅からバスで約15分
      </td>
      <td class="category">桜名所</td>
    </tr>
  </table>
</body>
</html>

ブラウザの出力例

まとめ

　表はデータ表示だけでなく、文字や画像のグリッド配置、セル結合を活用した複雑なレイアウトにも活用できます。
ここで紹介したように、

  • 枠線なしの表で文字を整列
  • セルサイズ・揃えを指定したギャラリー
  • colspan・rowspanで自由にセルを結合

　…などを組み合わせれば、レスポンシブ以前のレイアウトや、メールテンプレートなどにも応用が可能です。

ぜひ一度「表をレイアウト用のコンテナ」として使ってみて、その柔軟性を体感してみてください！