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種類のタグを“的確に”組み合わせないと表が完成しないので注意が必要です。
表の基本となる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タグを3行分書きました。あたりまえですが、まだ内容は表示されていませんね。
- 続いて、見出しセル部分に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タグは3つ使われているので3行になっています。同じく列についても、thタグが4つ、tdタグが4つ×2で8か所(2行分あるため)で4列となっていますね。
品 名 | 麺の種類 | 温かいor冷たい | 価 格 |
---|---|---|---|
緑のたぬき | そ ば | 温かい | 112円 |
赤いきつね | うどん | 温かい | 118円 |
行が5行ならtrタグは5つ、列が7列ならth・tdタグは7つという具合に使います。
つまり、作りたい表のセル数を想定してtrタグやth・tdタグを使うことで思い通りの表を作れます。
この記事のまとめ
- Webサイトで表を作るにはtableタグをはじめとした専用のタグを使う
- 表全体をtableで囲み、その中にtrタグで行を指定、trの中でth、tdを使って列(セルの数)を指定する