<table>・<tr>・<th>・<td> | 正しい表の使い方・作り方

2018/5/11 2020/6/23

いろは

Webサイト(ホームページ)で“表”を作るにはtableタグ、trタグ、thタグ、tdタグなどの表専用のHTMLタグを使います。表組みに関係するHTMLタグは種類が多いので最初は少し複雑に感じるかもしれません。

今回は表組みの基本である4種類のタグから少しマイナーなタグまで、タグの意味・役割から基本の使い方まで基礎的なことを紹介します。

表を作るために使うHTMLタグ

表を作るためのHTMLタグは以下の10種類になります。

tableタグ
trタグ
thタグ
tdタグ
theadタグ
tbodyタグ
tfootタグ
captionタグ
captionタグ
colgroupタグ
colタグ

表組み関係のタグは種類が多く、名前も似ているので表用のタグを完璧に覚えるのはHTMLの中でも比較的高難易度に分類されると思います。

HTMLでは基本的にtable、tr、th、tdタグを組み合わせて1つの表を組み上げます。pタグやaタグなどは、そのタグだけで完結するのに対し、これら4種類のタグを“的確に”組み合わせないと表が完成しないので注意が必要です。

tableタグ以外にも箇条書きリストや説明リストも複数のタグを使って1つの要素を形成するHTMLタグです。

表の基本となる4種類のタグ「table・tr・th・td」

まずは、table、tr、th、tdタグについて、それぞれの意味と役割を見ていきましょう。

tableタグ

tableタグは表を作成する基本となるタグで“表のエリア全体”を意味します。つまり、tableタグで囲まれている部分が表ということになります。
また、tableタグの直下にはtr、thead、tbody、tfoot、caption、colgroup、colの7種類のタグしか入れることはできないので注意しましょう。

trタグ

trタグは“Table Row”の頭文字で、意味としては「表の行」となります。つまり、trタグは表の中の1行を囲むのに使うタグということです。
trタグ1つで1行となるので、実際の表を作る場合には行数分のtrタグを記述することになります。

thタグ

thタグは“Table Header”の頭文字で、意味としては「表の見出し」となります。
thタグは表内の見出しのセルを指定するのに使うタグです。原則、trタグの中に記述します。

tdタグ

tdタグは“Table Data”の頭文字で、意味としては「表のデータ」となります。
tdタグは表内の一般的なセルに使うタグで、こちらのtdタグもtrタグの中に記述します。基本的に表のデータはtdタグでマークアップします。

tableタグの直下にtrタグがあり、trタグの中でth、tdタグを使う形になります。

表用の各HTMLタグの使い方・記述方法

意味を覚えたら実際に記述しながら使い方を覚えていきましょう。

まずはtableタグを記述する
HTML
```
<table></table>
```
まずは表全体を囲うtableタグからマークアップしました。この状態では内容が無いので表示されません。
次にtrタグを記述する
HTML
```
<table>
```
```
  <tr></tr>
```
```
  <tr></tr>
```
```
  <tr></tr>
```
```
</table>
```
tableタグの中にtrタグを３行分書きました。あたりまえですが、まだ内容は表示されていませんね。
続いて、見出しセル部分にthタグを記述する
HTML
```
<table>
```
```
  <tr>
```

    <th>品　名</th><th>麺の種類</th><th>温かいor冷たい</th><th>価　格</th>

```
  </tr>
```
```
  <tr></tr>
```
```
  <tr></tr>
```
```
</table>
```
ここで表示してみると以下のようになるはずです。（デザインはCSSによって異なりますが）
とりあえず、表っぽい感じが出てきましたね。続けてデータセルを作っていきましょう。
最後にtdタグでデータセルを記述する
HTML
```
<table>
```
```
  <tr>
```

    <th>品　名</th><th>麺の種類</th><th>温かいor冷たい</th><th>112円</th>

```
  </tr>
```
```
  <tr>
```

    <td>緑のたぬき</td><td>そ　ば</td><td>温かい</td><td></td>

```
  </tr>
```
```
  <tr>
```

    <td>赤いきつね</td><td>うどん</td><td>温かい</td><td>118円</td>

```
  </tr>
```
```
</table>
```
品　名麺の種類温かいor冷たい価　格
緑のたぬきそ　ば温かい 112円
赤いきつねうどん温かい 118円
td要素をいれると一気に表になりますね！。

tableタグ > trタグ > thタグ、tdタグという構造になります。
これを覚えれば、まずは基本的な表は作れます。

表で行と列の数を変えるには？

基本的な表のマークアップスタイルが分かったところで、「行」と「列」について考えてみたいと思います。

先程の例で何となく分かっているかもしれませんが、行の数はtrタグで決まり、列の数はthタグ・tdタグの数で決まります。

例で作った以下の表ではtrタグは３つ使われているので３行になっています。同じく列についても、thタグが４つ、tdタグが４つ×２で８か所（２行分あるため）で４列となっていますね。

品　名	麺の種類	温かいor冷たい	価　格
緑のたぬき	そ　ば	温かい	112円
赤いきつね	うどん	温かい	118円

行が５行ならtrタグは５つ、列が７列ならth・tdタグは７つという具合に使います。
つまり、作りたい表のセル数を想定してtrタグやth・tdタグを使うことで思い通りの表を作れます。

この記事のまとめ

Webサイトで表を作るにはtableタグをはじめとした専用のタグを使う
表全体をtableで囲み、その中にtrタグで行を指定、trの中でth、tdを使って列（セルの数）を指定する