6日でできる 新HTML&CSS入門｜テーブルの構造

行・列・セルの関係が分かれば、テーブルはむずかしくない。情報をきれいに整理して、読みやすいWebページを作ろう。

Webページでは、たくさんの情報を分かりやすく並べたい場面がよくあります。たとえば、生徒名簿、料金表、スケジュール表、商品一覧、成績表、イベント予定などは、文章だけで説明するよりも、表にしたほうが見やすくなります。

このように、行と列を使って情報を整理するために使うのがテーブルです。HTMLでは、tableを中心にして、tr、th、tdを組み合わせながら表を作ります。

tableは表全体を表し、trは横方向の行を作ります。その行の中に、見出しセルであるthや、データセルであるtdを入れていくことで、表の形ができあがります。

最初はタグが何重にも入れ子になっているため、少し複雑に見えるかもしれません。しかし、テーブルは「表全体」「行」「セル」という順番で考えると、とても整理しやすくなります。

この記事では、テーブルを作るために必要な行・列・セルの考え方から、table、tr、th、tdの役割、border属性による枠線の違い、cellpaddingやcellspacing、colspanやrowspanによるセル結合まで、HTMLの基本として丁寧に解説していきます。

テーブルは行・列・セルでできている

テーブルを理解するために、まずは行、列、セルという3つの考え方を押さえておきましょう。

表は、横方向と縦方向に情報を並べることで作られます。横方向のまとまりが行、縦方向のまとまりが列、そして行と列が交わるひとつひとつのマスがセルです。

用語説明イメージ
行横方向に並ぶデータのまとまり1人分、1商品分、1件分の情報
列縦方向に並ぶ同じ種類の情報氏名だけ、価格だけ、日付だけが並ぶ部分
セル行と列が交わるひとつのマス実際の値を入れる場所

たとえば、名簿を作る場合を考えてみましょう。1人の生徒について、氏名、学年、出身地、部活動を横に並べると、その横一列が行になります。

一方、氏名だけを上から下へ見ていくと、同じ種類の情報が縦に並んでいます。これが列です。

そして、田中さんの氏名、田中さんの学年、田中さんの出身地といった個別の情報が入るマスがセルです。

HTMLのテーブルでは、まずtrで行を作り、その行の中にthやtdを並べてセルを作ります。列は、各行のセルが縦にそろうことで自然に作られると考えると分かりやすいです。

図1：行・列・セルからできるテーブルの基本

この図から分かること

この図から、テーブルは行、列、セルの組み合わせでできていることが分かります。

HTMLでは、tableが表全体を包みます。その中にtrを置くことで横方向の行を作り、trの中にthやtdを並べてセルを作ります。

見出しになるセルにはthを使い、実際のデータを入れるセルにはtdを使います。行ごとにセル数をそろえることで、縦方向に列が整い、表として読みやすい形になります。

テーブルを作るときは、いきなりHTMLを書き始めるのではなく、まず「何列必要か」「何行必要か」「見出しは何か」を考えると、構造を組み立てやすくなります。

テーブルを作る基本タグ

HTMLでテーブルを作るときは、主にtable、tr、th、tdを使います。この4つの関係を理解すると、基本的な表を作れるようになります。

タグ役割よく使う場面
table表全体を表すテーブル全体を囲む
tr行を作る横方向のデータをまとめる
th見出しセルを作る項目名や分類名を入れる
tdデータセルを作る実際の値や内容を入れる

tableは、表全体の範囲を示すタグです。テーブルを作るときは、まずtableで全体を囲みます。

trは、横方向の行を作ります。1つのtrが、表の1行に対応します。見出し行を作る場合も、データ行を作る場合も、まずtrで行を作ります。

thは、見出しセルを作るタグです。氏名、学年、出身地、部活動のように、列の意味を表す項目名に使います。

tdは、データセルを作るタグです。実際の氏名、学年、出身地、部活動名など、具体的な情報を入れます。

tableからtr、th、tdへと入れ子にする

テーブルは、タグを正しい順番で入れ子にして作ります。基本の順番は、table、tr、thまたはtdです。

tableの中にtrを入れ、trの中にthやtdを入れます。

この関係を崩して、tableの直下にtdを書いたり、trの外側にthを書いたりすると、分かりにくいHTMLになります。ブラウザが補正して表示してくれる場合もありますが、正しい構造で書くことが大切です。

階層書く内容
1段目tableで表全体を作る
2段目trで行を作る
3段目thやtdでセルを作る

テーブルを書くときは、まず表全体を作るtableを用意します。次に、必要な行の数だけtrを追加します。そして、それぞれのtrの中に、列の数に合わせてthやtdを並べます。

このように外側から内側へ向かって考えると、テーブルの構造が整理しやすくなります。

trの数で行数が決まる

テーブルの行数は、基本的にtrの数で決まります。

たとえば、見出し行が1行、データ行が3行あるテーブルでは、trが合計4つ必要です。最初のtrにはthを並べ、2行目以降のtrにはtdを並べる形がよく使われます。

行の種類使うセル内容
見出し行th項目名を入れる
データ行td実際のデータを入れる

見出し行に4つのthがある場合、データ行にも4つのtdを用意すると、列がきれいにそろいます。

たとえば、見出し行が「氏名」「学年」「出身地」「部活動」の4列であれば、各データ行も「氏名」「学年」「出身地」「部活動」に対応する4つのtdを持つようにします。

セル数が行ごとにずれると、表の見た目もずれてしまうことがあります。まずは各行のセル数をそろえることを意識しましょう。

thとtdの違いを理解する

thとtdは、どちらもセルを作るタグですが、役割が違います。

thは見出しセルです。表の中で、項目名や分類名を示すために使います。tdはデータセルです。thで示された項目に対する具体的な値を入れます。

セルの種類役割例
th見出しセル氏名、学年、出身地、部活動
tdデータセル佐藤美咲、2年、東京都、美術部

多くのブラウザでは、thの文字は標準表示で太字や中央寄せのように見えることがあります。これは、見出しセルとして分かりやすく見えるようにするためです。

ただし、thを使う理由は見た目だけではありません。表の中で「ここは見出しである」と意味を伝えるために使います。実際のデータにはtdを使い、項目名や分類名にはthを使うようにしましょう。

基本的なテーブルを作成する

最初のサンプルでは、図書室の貸出状況を表にしてみます。書名、分類、貸出日、状態を列として並べます。

ファイル名： lesson14_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>図書貸出一覧</title>
</head>
<body>
  <h1>図書貸出一覧</h1>

  <table border="1">
    <tr>
      <th>書名</th>
      <th>分類</th>
      <th>貸出日</th>
      <th>状態</th>
    </tr>
    <tr>
      <td>はじめてのHTML</td>
      <td>Web制作</td>
      <td>6月3日</td>
      <td>貸出中</td>
    </tr>
    <tr>
      <td>パソコン入門</td>
      <td>IT基礎</td>
      <td>6月5日</td>
      <td>返却済み</td>
    </tr>
    <tr>
      <td>デザインの基本</td>
      <td>デザイン</td>
      <td>6月8日</td>
      <td>貸出中</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、「図書貸出一覧」という見出しの下に、4列4行のテーブルが表示されます。

書名分類貸出日状態
はじめてのHTMLWeb制作6月3日貸出中
パソコン入門IT基礎6月5日返却済み
デザインの基本デザイン6月8日貸出中

この表では、最初のtrが見出し行です。その中には、書名、分類、貸出日、状態という4つのthがあります。

2行目以降のtrには、実際のデータを入れるtdがあります。各行に4つずつtdがあるため、見出し行と対応した4列の表になります。

tableにborder属性を指定しているため、表とセルの境界に枠線が表示されます。HTMLの学習段階では、枠線があるとセルの位置を確認しやすくなります。

border属性で枠線を指定する

border属性は、テーブルの枠線を表示するために使われてきた属性です。値を変えることで、枠線の見え方が変わります。

指定表示の特徴
border 0枠線を表示しない
border 1細い枠線を表示する
border 3太めの枠線を表示する

border属性を指定すると、表の外枠やセルの区切りが分かりやすくなります。特に、HTMLを学習している段階では、どこからどこまでがひとつのセルなのかを確認しやすくなります。

ただし、現在のWeb制作では、枠線の太さ、色、種類などの見た目はCSSで調整するのが一般的です。ここでは、HTMLだけでテーブルの構造を確認するためにborder属性を使っています。

CSSによる見た目の調整は、CSSに関する記事以降で扱います。

図2：table、tr、th、tdの入れ子構造

この図から分かること

この図では、HTMLコードの入れ子構造と、ブラウザに表示されるテーブルの関係を確認できます。

tableは表全体を包み、その中にtrが入ります。trは横方向の行を表し、trの中にあるthやtdがセルになります。

コード内でtrを増やすと、表の行が増えます。trの中にthやtdを増やすと、その行のセル数が増えます。

つまり、行数はtrの数によって決まり、列数は基本的に各trの中にあるthやtdの数によって決まります。

テーブルの表示がうまくいかないときは、table、tr、thまたはtdという順番で入れ子になっているかを確認すると、原因を見つけやすくなります。

枠線を太くしたテーブルを作成する

次のサンプルでは、border属性の値を3にして、枠線を太く表示します。内容は、店舗ごとの営業時間一覧に変更します。

ファイル名： lesson14_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>店舗営業時間一覧</title>
</head>
<body>
  <h1>店舗営業時間一覧</h1>

  <table border="3">
    <tr>
      <th>店舗名</th>
      <th>開店時刻</th>
      <th>閉店時刻</th>
      <th>定休日</th>
    </tr>
    <tr>
      <td>中央店</td>
      <td>9時</td>
      <td>18時</td>
      <td>月曜日</td>
    </tr>
    <tr>
      <td>駅前店</td>
      <td>10時</td>
      <td>20時</td>
      <td>水曜日</td>
    </tr>
    <tr>
      <td>南口店</td>
      <td>11時</td>
      <td>19時</td>
      <td>火曜日</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、次のような店舗ごとの営業時間一覧が表示されます。

店舗名開店時刻閉店時刻定休日
中央店9時18時月曜日
駅前店10時20時水曜日
南口店11時19時火曜日

border属性の値を3にしているため、枠線が太く表示されます。border属性の値が1のときよりも、表全体の境界やセルの区切りが目立ちます。

枠線が太いと表の存在感は強くなりますが、線が目立ちすぎると情報そのものが読みにくくなる場合もあります。表では、線を目立たせることよりも、データを読み取りやすくすることが大切です。

学習段階では、border属性の値を変えながら、表示がどのように変わるか確認してみると理解しやすくなります。

枠線を表示しないテーブルを作成する

border属性に0を指定すると、枠線を表示しないテーブルになります。表の構造は残りますが、セルを区切る線は見えなくなります。

次のサンプルでは、イベント開催予定を表にします。

ファイル名： lesson14_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>イベント開催予定</title>
</head>
<body>
  <h1>イベント開催予定</h1>

  <table border="0">
    <tr>
      <th>イベント名</th>
      <th>開催日</th>
      <th>会場</th>
      <th>開始時刻</th>
    </tr>
    <tr>
      <td>HTML体験会</td>
      <td>5月12日</td>
      <td>第1研修室</td>
      <td>10時</td>
    </tr>
    <tr>
      <td>Web制作相談会</td>
      <td>5月19日</td>
      <td>オンライン</td>
      <td>14時</td>
    </tr>
    <tr>
      <td>作品発表会</td>
      <td>5月26日</td>
      <td>多目的ホール</td>
      <td>13時</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、次のようなイベント開催予定が表示されます。

イベント名開催日会場開始時刻
HTML体験会5月12日第1研修室10時
Web制作相談会5月19日オンライン14時
作品発表会5月26日多目的ホール13時

border属性の値が0なので、セルを区切る枠線は表示されません。ただし、HTMLとしてはtable、tr、th、tdで構成された表になっています。

枠線がない場合、見た目はすっきりしますが、項目同士の境界が分かりにくくなることがあります。実際のWebページでは、CSSを使って余白、背景色、罫線などを調整し、枠線がなくても読みやすい表に整えます。

ここでは、HTMLだけで表の構造を確認するため、border属性の値を変えて違いを見ています。

border属性の違いを比べる

ここまでの3つのサンプルでは、border属性の値を変えて、テーブルの見え方を確認しました。

サンプル指定見え方
lesson14_1.htmlborder 1細い枠線が表示される
lesson14_2.htmlborder 3枠線が太く表示される
lesson14_3.htmlborder 0枠線が表示されない

border属性の値を変えても、テーブルの基本構造は変わりません。table、tr、th、tdによって作られる行、列、セルの関係は同じです。

変わるのは、枠線が見えるかどうか、または枠線がどのくらい目立つかという点です。

HTMLの学習では、border属性を使うと表の構造が見やすくなります。慣れてきたら、見た目の調整はCSSで行うという考え方へ進んでいきましょう。

thとtdは意味で使い分ける

thとtdは、表示上の違いだけでなく、意味の違いで使い分けます。

thは、そのセルが見出しであることを示します。表の一番上の行にある項目名や、左端にある分類名などに使います。

tdは、見出しに対応する具体的なデータを表します。

使うタグ入れる内容例
th項目名や見出し商品名、価格、在庫
td実際の値ノート、500円、あり

すべてのセルをtdだけで作っても、見た目として表のように表示されることはあります。しかし、項目名にはthを使ったほうが、テーブルの構造が分かりやすくなります。

読み手にとっても、ブラウザにとっても、「ここは見出し」「ここはデータ」と意味が分かれているほうが親切です。見出ーブルの構造が分かりやすくなります。

読み手にとっても、ブラウザにとっても、「ここは見出し」「しセルにはth、データセルにはtdを使うという基本を意識しましょう。

cellpaddingはセル内の余白を調整する

cellpaddingは、セルの枠線と文字との間にある余白を指定するために使われてきた属性です。

値が小さいと、文字がセルの枠に近づいて表示されます。値が大きいと、文字の周りに空間ができ、ゆったりした見た目になります。

指定効果
cellpadding 0文字とセルの境界が近くなる
cellpadding 4文字の周りに少し余白ができる
cellpadding 10文字の周りに広い余白ができる

適度な余白があると、表の内容が読みやすくなります。

ただし、現在のWeb制作では、セル内の余白はCSSで調整するのが一般的です。ここでは、cellpaddingがセルの内側の余白に関係する属性であることを理解しておきましょう。

CSSについては、CSSに関する記事以降で詳しく扱います。

cellspacingはセル同士の間隔を調整する

cellspacingは、セルとセルの間隔を指定するために使われてきた属性です。

cellpaddingがセルの内側の余白を調整するのに対して、cellspacingはセル同士の外側の間隔を調整します。

属性調整する場所
cellpaddingセルの枠線と文字の間
cellspacingセルとセルの間

cellspacingの値を大きくすると、セル同士が離れて見えます。cellspacingを0にすると、セル同士の間隔がなくなり、枠線がつながって見えやすくなります。

cellpaddingとcellspacingは名前が似ていますが、調整する場所が違います。内側の余白がcellpadding、セル同士の間隔がcellspacingと覚えると分かりやすいです。

widthとheightで大きさを指定する考え方

テーブルやセルには、widthやheightを使って幅や高さを指定することもできます。

widthは横方向の大きさ、heightは縦方向の大きさを表します。

属性役割
width幅を指定する
height高さを指定する

たとえば、widthを使うと、テーブル全体やセルの横幅を指定できます。heightを使うと、高さを指定できます。

ただし、テーブルの大きさは、中に入る文字の量やブラウザの表示領域によって変化することがあります。指定した値が常に完全にそのまま反映されるとは限りません。

また、現在のWeb制作では、幅や高さもCSSで管理するのが基本です。HTMLの学習段階では、widthやheightが大きさに関係する属性であることを知っておく程度で大丈夫です。

colspanで横方向にセルを結合する

colspanは、横方向に複数のセルを結合するための属性です。

たとえば、colspanに2を指定すると、そのセルは横方向に2列分の幅を持つセルになります。

<td colspan="2">2列分を使うセル</td>

このようなセルは、複数列にまたがる見出しや、合計欄などを作るときに使えます。

使用場面colspanの使い方
複数の列をまとめた見出し2列分、3列分をひとつの見出しにする
合計欄複数の項目欄をまとめて表示する
分類見出し同じ種類の列を大きくまとめる

colspanを使うときは、結合した分だけ他のセル数を調整する必要があります。

たとえば、通常4列の表で、1つのセルが2列分を使う場合、その行では残り2列分のセルを用意すれば、合計4列分になります。

rowspanで縦方向にセルを結合する

rowspanは、縦方向に複数のセルを結合するための属性です。

たとえば、rowspanに3を指定すると、そのセルは縦方向に3行分の高さを持つセルになります。

<th rowspan="3">3行分を使う見出し</th>

rowspanは、複数行に共通する分類や日付、グループ名などをまとめて表示したいときに便利です。

使用場面rowspanの使い方
同じ日付の予定をまとめる複数の予定行に共通する日付を1つにする
同じ分類の商品をまとめる複数の商品行に共通する分類名を1つにする
同じ担当者の作業をまとめる複数の作業行に共通する担当者名を1つにする

rowspanを使った場合、下の行では、すでに上から結合されている位置にセルを書きません。

この考え方を忘れて通常通りにセルを並べると、表の列がずれてしまうことがあります。rowspanを使うときは、どのセルが何行分を使っているのかを確認しながら書くことが大切です。

図3：colspanとrowspanによるセル結合

この図から分かること

この図から、colspanは横方向のセル結合、rowspanは縦方向のセル結合に使う属性であることが分かります。

colspanに2を指定すると、ひとつのセルが横方向に2列分を使います。rowspanに3を指定すると、ひとつのセルが縦方向に3行分を使います。

セルを結合すると、複数の列をまとめた見出しや、複数行に共通する項目を分かりやすく表示できます。

ただし、セルを結合した場合は、その分だけ他のセルの数を調整する必要があります。テーブル全体を格子として考え、結合したセルがどの位置を占めているのかを確認しながら書くと、表のずれを防ぎやすくなります。

テーブルの構造を読みやすくするコツ

テーブルのHTMLは、行やセルが増えるほど長くなります。そのため、インデントをそろえて、入れ子構造を見やすくすることが大切です。

tableの中にtrを書き、trの中にthやtdを書くという階層が分かるように、内側の要素ほど右へずらして書くと読みやすくなります。

書き方のポイント理由
table、tr、thまたはtdの階層をそろえる入れ子構造を確認しやすい
1つのセルを1行ずつ書くセル数を数えやすい
見出し行とデータ行を分けて見るthとtdの役割を確認しやすい
閉じタグを忘れない表示の崩れを防ぎやすい

HTMLは、インデントが多少ずれていても表示されることがあります。しかし、あとから修正したり、間違いを探したりするときには、インデントがそろっているほうが圧倒的に分かりやすくなります。

テーブルがうまく表示されないときは、まずtableの中にtrが入っているか、trの中にthやtdが入っているかを確認しましょう。

テーブルに向いている情報

tableは、行と列の関係がある情報を整理するために使います。

表に向いているのは、同じ項目を複数並べて比較したい情報です。

テーブルに向いている情報理由
名簿氏名、学年、所属などを同じ列で整理できる
料金表プランごとの価格や内容を比較しやすい
時間割曜日と時間の組み合わせで整理できる
商品一覧商品名、価格、在庫などを並べて見られる
スケジュール日付、時刻、場所、内容を対応させやすい

一方で、ページ全体のレイアウトを整える目的でtableを使うのは適切ではありません。文章や画像を横並びにしたいだけの場合は、CSSを使って配置を調整する方法を後の記事で学びます。

tableは、あくまで表として意味のあるデータを整理するために使うことが大切です。

使用するタグと属性を整理する

ここまで登場したテーブル関連のタグと属性を整理しておきます。

タグまたは属性概要閉じタグ
table表全体を表す必要
tr行を作る必要
th見出しセルを作る必要
tdデータセルを作る必要
border枠線の太さを指定する属性のため不要
cellpaddingセル内側の余白を指定する属性のため不要
cellspacingセル同士の間隔を指定する属性のため不要
width幅を指定する属性のため不要
height高さを指定する属性のため不要
colspan横方向にセルを結合する属性のため不要
rowspan縦方向にセルを結合する属性のため不要

まず覚えたいのは、table、tr、th、tdの4つです。この4つを正しく入れ子にできれば、基本的なテーブルは作れます。

border、cellpadding、cellspacing、width、heightは、テーブルの見え方に関係する属性です。ただし、現在のWeb制作では、これらに相当する見た目の調整はCSSで行うことが多くなっています。

colspanとrowspanは、表の構造そのものを変える属性です。横方向に結合する場合はcolspan、縦方向に結合する場合はrowspanを使います。

テーブルを作成するときの確認ポイント

テーブルを作成したら、ブラウザで表示を確認し、行と列が意図した通りに並んでいるかを見てみましょう。

確認項目確認する内容
tableの範囲表全体がtableの中に入っているか
trの位置各行がtableの中にあるか
thとtdの位置セルがtrの中にあるか
セル数各行のセル数がそろっているか
見出しセル項目名にthを使っているか
データセル実際の値にtdを使っているか
border属性枠線が意図した表示になっているか
セル結合colspanやrowspanの指定数が正しいか

テーブルが崩れて表示される場合は、外側から順番に確認するのがおすすめです。

まずtableが正しく閉じられているかを確認し、次にtrの数を見ます。そのうえで、各trの中に必要な数のthやtdがあるかを確認します。

セル結合を使っている場合は、結合したセルが何列分、何行分を使っているかを考えながら、他のセル数を調整します。

テーブルは、データを整理して見せるための大切なHTMLです。table、tr、th、tdの基本構造をしっかり理解しておくと、名簿、料金表、スケジュール表など、さまざまな情報を分かりやすく表示できるようになります。