【HTMLのテーブルを徹底解説】td要素とtr要素の違いとは？

HTMLのテーブルには、td要素やtr要素、th要素など名前が似通ったものがあり、混乱することがありますよね。

頻繁に使う要素ではないですが、きちんと覚えておきたいもの。

今回は、td要素やtr要素などを始めとした、テーブル作成に使われる要素や属性を覚えたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTMLのテーブル作成に必要な、td要素やtr要素などを詳しく学ぶことができますよ。

ぜひ最後まで読んでくださいね！

table要素とは？どんな時に使うもの？

HTMLのテーブルは、table要素を使って作成します。

複数のデータを表のように並べたい場合に、データを入れるセルを用意してテーブルを作るイメージです。

テーブルの中には、1つ以上の行があり、その中にセルが並びます。

データが入ったセルの他に、どんな属性なのかを表す「項目名」の行をつけることもあります。

データが入ったセルをtd要素で表示し、項目名が入ったセルをth要素で表示します。

次項でそれぞれの要素について、詳しく紹介しましょう。

テーブルを構成する要素について

前述のように、テーブルの作成には、table要素を使います。

実際のコードを書いてみます。

<table>
<caption>買い物リスト</caption>
<colgroup span="1" class="a"></colgroup>
<colgroup span="1" class="b"></colgroup>
<thead>
  <tr>
    <th>商品</th>
    <th>金額</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th>牛乳</th>
    <td>200円</td>
  </tr>
  <tr>
    <th>豚肉</th>
    <td>300円</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <th>合計</th>
    <td>500円</td>
  </tr>
</tfoot>
</table>

必須ではない要素もありますので、すべての要素をすぐに覚える必要はありません。

よく使用するものから覚えていくと良いでしょう。

ここでは、使用頻度が高そうなものの順番で紹介していきますね。

tr要素、th要素、td要素について

table要素の中身は、主にtr要素、th要素、td要素で構成されています。

この3つを覚えるだけでもテーブルを作成することができます。

tr要素のtrは「Table Row」の略で、テーブルの行を作成します。

行を変えるごとに新しく設定します。

th要素のthは「Table Header」の略で、テーブルの見出しや項目など、ヘッダー部分のセルを1つ作成します。

例えば、セルを3つ並べたい場合には、先ほどのtr要素の中に3つ配置します。

後述するthead要素で囲うこともありますね。

td要素のtdは「Table Data」の略で、テーブルのデータとなるセルを1つ作成します。

こちらもtr要素の中に複数並べて配置します。

tr要素、th要素、td要素のみでテーブル作成すると以下のようになります。

<table>
  <tr>
    <th>商品</th>
    <th>金額</th>
  </tr>
  <tr>
    <th>牛乳</th>
    <td>200円</td>
  </tr>
  <tr>
    <th>豚肉</th>
    <td>300円</td>
  </tr>
  <tr>
    <th>合計</th>
    <td>500円</td>
  </tr>
</table>

これだけでもテーブルを作れることが確認できたでしょうか。

tr要素、th要素、td要素の3つは名前も似ているので間違えやすいですね。

略す前の意味を覚えておくと、実際に使うときにも役割を把握しやすいでしょう。

thead要素、tbody要素、tfoot要素について

thead要素、tbody要素、tfoot要素は、tr要素で囲った行をグループごとにまとめることができます。

table要素の直下の要素として使いますが、これら3つが無くてもテーブルは作成できます。

グループごとに分けることにより、thead要素のみ色を変えたり、tbody要素のみスクロールさせたりということが容易にできるようになります。

また、ブラウザによっては、thead要素とtfoot要素を先に読み込んで表示したり、印刷する際にテーブルが複数ページに渡った場合でもグループが分断されないように改ページしたりといった機能もあります。

それぞれどういう要素なのか解説していきますね。

thead要素

thead要素は、テーブルのヘッダー部分を意味し、見出しとなる行のグループを示します。

複数の行をグループにすることができますが、1つのテーブルで配置できるthead要素は1つのみです。

以下のように、thを使った項目の行と、tdを使ったデータの行をヘッダーとしてまとめることもできます。

<table>
<thead>
  <tr>
    <th>項目A</th>
    <th>項目B</th>
    <th>項目C</th>
  </tr>
  <tr>
    <td>Aの説明</td>
    <td>Bの説明</td>
    <td>Cの説明</td>
  </tr>
</thead>
</table>

tbody要素、tfoot要素よりは前に書き、caption要素、colgroup要素の後に配置する必要がありますね。

tbody要素

tbody要素は、テーブルの本体部分である行のグループを示します。

thead要素より後に配置しましょう。

要素自体は1つのテーブルに複数配置することができ、tbody要素の中に複数の行を置くこともできます。

<table>
<tbody>
  <!-- テーブル本体のグループ1 -->
  <tr>
    <td>データセル</td>
    <td>データセル</td>
  </tr>
  <tr>
    <td>データセル</td>
    <td>データセル</td>
  </tr>
</tbody>
<tbody>
  <!-- テーブル本体のグループ2 -->
  <tr>
    <td>データセル</td>
    <td>データセル</td>
  </tr>
  <tr>
    <td>データセル</td>
    <td>データセル</td>
  </tr>
</tbody>
</table>

table要素の直下に、tbody要素とtr要素が混在するような書き方はNGです。

tbody要素を書く場合、tr要素はその子要素として使用しましょう。

tfoot要素

tfoot要素は、テーブルのフッター部分を意味し、これまでのテーブルの列の要約となる行のグループを示します。

thead要素と同様に、1つのテーブルで1つのみ配置できます。

以前のHTMLでは、tfoot要素はtbody要素の前に配置する必要がありましたが、今ではどちらが先でも問題ありません。

どちらの順序で書いたとしても、tfoot要素の部分がテーブルの最後に表示されます。

caption要素について

caption要素は、テーブルのキャプションを意味します。タイトルや注釈をつけたい場合に利用します。

1つのテーブルで1つのみ使用ができ、テーブル要素の冒頭に配置します。

<table>
<caption>開催イベント</caption>
<tbody>
  <!-- テーブルの中身 -->
</tbody>
</table>

CSSのcaption-sideプロパティを使って、キャプションの表示位置を変えることができます。

プロパティで使える値は、「top」と「bottom」の2つです。

キャプションをテーブルの下に表示させたい場合には、「caption-side: bottom」を指定します。

caption{
  caption-side: bottom;
  text-align: center:
}

「text-align: center」を併せて使うことで、文字を中央に配置できますね。

colgroup要素について

colgroup要素は、テーブルの列を意味のあるまとまりとしてグループ化します。

colgroup要素単体で使用するか、colgroup要素とcol要素を併用して記述します。

<!-- colgroup要素のみ -->
<table>
<colgroup span="1" class="sideA"></colgroup>
<colgroup span="2" class="sideB"></colgroup>
<tbody>
  <!-- テーブルの中身 -->
</tbody>
</table>

<!-- col要素を併せて使う -->
<table>
<colgroup>
  <col span="1" class="sideA">
  <col span="2" class="sideB">
</colgroup>
<tbody>
  <!-- テーブルの中身 -->
</tbody>
</table>

span属性には、グループ化する列の数を指定します。

例えば、5つの列があったときに、「1列・2列・2列」に分けたい場合には、

<colgroup span="1"></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>

と記述します。

col要素を使う場合には、span属性はcol要素内に記述します。

span属性を省略した場合には、1列をグループ化したことになります。

<colgroup></colgroup>
<colgroup span="3"></colgroup>

上記のように書くと、テーブルの4列を1列と3列にグループ化したことになります。

このように列をグループ化させることで、グループごとのスタイルをCSSで指定することができるようになります。

実際に、colgroup要素にクラス名を付けてみます。

<table>
<colgroup class="col-green"></colgroup>
<colgroup span="2" class="col-gray"></colgroup>
 <tr>
    <td>データセル</td>
    <td>データセル</td>
    <td>データセル</td>
  </tr>
  <tr>
    <td>データセル</td>
    <td>データセル</td>
    <td>データセル</td>
  </tr>
</table>

そして、それぞれのクラスに別の背景色を指定します。

.col-green{
 background-color: #00cc00;
}
.col-gray{
 background-color: #bcc7d7;
}

これにより、1列が緑色、2列が灰色、というようにセルの背景色を指定することができました。

他にも文字の色や太さ、枠線のスタイルなどをグループごとに変えることができます。色々な設定を試してみましょう。

セル要素の属性について

テーブル内において、複数のセルが結合し、1つのセルがまたがって表示されているのを見たことがあるかと思います。

これは、th要素とtd要素に属性を指定することで実装することができます。

ここでは、以下の2つの属性を紹介します。

それぞれ見ていきましょう。

rowspan属性

rowspan属性は、セルが縦方向に結合し、1つのセルとして表示される指定です。

値には結合したいセルの数を記述します。

<table>
<tr>
  <th>種類</th>
  <th>商品名</th>
  <th>価格</th>
</tr>
<tr>
  <td rowspan="2">食べ物</td>
  <td>ホットドッグ</td>
  <td>250円</td>
</tr>
<tr>
  <td>おにぎり</td>
  <td>150円</td>
</tr>
<tr>
  <td>飲み物</td>
  <td>緑茶</td>
  <td>200円</td>
</tr>
</table>

上記のテーブルでは、「食べ物」のセルを縦方向に伸ばして、2つの食べ物の行にまたがっていますね。

2行目のtr要素には、セルを2つしか用意していないことに注目してください。

セルの数を間違えると、レイアウトが崩れてしまうので注意しましょう。

食べ物が3つあって、さらに縦方向に伸ばしたい場合には値を3にします。

colspan属性

colspan属性は、セルを横方向に結合し、1つのセルとして表示します。

rowspan属性と同様に、値には結合したいセルの数を記述します。

<table>
<tr>
  <th>品名</th>
  <th>単価</th>
  <th>個数</th>
  <th>金額</th>
</tr>
<tr>
  <td>ペン</td>
  <td>50円</td>
  <td>10個</td>
  <td>500円</td>
</tr>
<tr>
  <td>消しゴム</td>
  <td>30円</td>
  <td>16個</td>
  <td>480円</td>
</tr>
<tr>
  <td colspan="3">合計金額</td>
  <td>980円</td>
</tr>
</table>

上記のテーブルでは「合計」のセルを横に結合して伸ばしています。

3セル分伸ばしているので、「980円」のセルを足し合わせると4つになり、他の行と数が合いますね。

こちらも数が一致していないとレイアウトが崩れてしまうので注意しましょう。

table要素の応用編

table要素でよく使われる要素とセルを伸ばす属性について分かっていただけたでしょうか。

ここでは、table要素を使う上での注意点や応用できる点を紹介します。

CSSでデザインを指定する

table要素の属性、borderやbgcolorなどを使ってテーブルのデザインを変更することができます。

ただし、現在のHTMLでは、見た目の指定はCSSで行うことが推奨されています。

属性を使わず、CSSを使って指定をしましょう。

<!-- 属性を使った見た目の指定（非推奨） -->
<table border="2" bgcolor="#ccc">
<!-- テーブルの中身 -->
</table>

上記の指定をCSSで記述する場合には、以下のように書きます。

table {
  border-collapse: collapse;
  background-color: #ccc;
}
th, td {
  border: solid 2px #333; 
}

「background-color」、「border」のプロパティを使って、それぞれ、背景色と枠線を指定しています。

solidは1本の実線が表示されます。カラーコード#333の2pxの実線ということですね。

枠線のスタイルは他にも選択でき、例えば、dashedだと点線が表示されます。

tableに対して、この指定を行うと、テーブル全体を囲う枠線が追加されます。

また、「border-collapse: collapse」は、隣接するセルの枠線同士が重なる指定です。

これを指定していないと、セルごとの枠線が離れて表示され、テーブルによっては見づらいレイアウトになってしまいます。

レスポンシブ対応させる方法

テーブルの幅は、何も指定していない場合は、セルの中のテキスト量で決まります。

スマホでも閲覧しやすいように、レスポンシブ対応させたいときがありますよね。

画面の幅に応じて、テーブルの幅を決める方法を紹介します。

<table>
  <caption>果物の値段</caption>
  <tr>
    <th>果物</th>
    <th>金額</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>150円</td>
  </tr>
  <tr>
    <td>ぶどう</td>
    <td>300円</td>
  </tr>
</table>

CSSで「width:100%」と「max-width:600px」を指定します。

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
}
th, td {
  padding: 7px 10px;
  border: solid 1px #333;
}

上記のように指定すると、親要素が600px以下では幅100%で表示しますが、600pxより大きくなった場合には、600pxで固定されます。

分かりやすいように枠線や背景色も指定しています。

「100vw」と指定すると、親要素の大きさと関係なく、画面いっぱいに広がります。

デザインに合わせて指定してみてくださいね。

テキストを折り返さない方法

テーブル内のテキストは自動的に改行されます。

短い単語などは、改行することで見づらくなることがありますよね。

改行したくないセルに以下のように指定することで、改行されなくなります。

.nowrap {
  white-space: nowrap;
}

こちらの指定は短いテキストのみに行うことをおすすめします。

長いテキストに使用すると、セルからテキストがはみ出してしまいます。

画面が小さいスマホなどは、レイアウトが崩れる原因にもなるので、しっかり確認しておきましょう。

まとめ：table要素のパーツを1つずつ覚えていこう

今回は、td要素やtr要素などを中心にHTMLのテーブル作成について解説してきました。

table要素には普段は使わない要素や属性が多いので、1つ1つ覚えていくことが大切です。

まずは、td要素、tr要素、th要素の3つの違いを理解していきましょう。

Webページにテーブルを設置する際に、今回の記事が参考になれば幸いです。