Webのいろは
MENU
  • HTML
  • CSS
検索結果
検索結果
  • HOME
  • >
  • HTML&CSS
  • >
  • <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方

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

2018/5/11 2020/6/23
いろは
<table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
  • B!

MENU

  • 1 表を作るために使うHTMLタグ
    • 1.1 表の基本となる4種類のタグ「table・tr・th・td」
    • 1.2 表用の各HTMLタグの使い方・記述方法
    • 1.3 表で行と列の数を変えるには?
  • 2 この記事のまとめ

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タグの使い方・記述方法

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

  1. まずはtableタグを記述する
  2. HTML
  3. <table></table>
  4. まずは表全体を囲うtableタグからマークアップしました。この状態では内容が無いので表示されません。
  5. 次にtrタグを記述する
  6. HTML
  7. <table>
  8.   <tr></tr>
  9.   <tr></tr>
  10.   <tr></tr>
  11. </table>
  12. tableタグの中にtrタグを3行分書きました。あたりまえですが、まだ内容は表示されていませんね。
  13. 続いて、見出しセル部分にthタグを記述する
  14. HTML
  15. <table>
  16.   <tr>
  17.     <th>品 名</th><th>麺の種類</th><th>温かいor冷たい</th><th>価 格</th>
  18.   </tr>
  19.   <tr></tr>
  20.   <tr></tr>
  21. </table>
  22. ここで表示してみると以下のようになるはずです。(デザインはCSSによって異なりますが)
    とりあえず、表っぽい感じが出てきましたね。続けてデータセルを作っていきましょう。
  23. 最後にtdタグでデータセルを記述する
  24. HTML
  25. <table>
  26.   <tr>
  27.     <th>品 名</th><th>麺の種類</th><th>温かいor冷たい</th><th>112円</th>
  28.   </tr>
  29.   <tr>
  30.     <td>緑のたぬき</td><td>そ ば</td><td>温かい</td><td></td>
  31.   </tr>
  32.   <tr>
  33.     <td>赤いきつね</td><td>うどん</td><td>温かい</td><td>118円</td>
  34.   </tr>
  35. </table>
  36. 品 名麺の種類温かいor冷たい価 格
    緑のたぬきそ ば温かい112円
    赤いきつねうどん温かい118円
  37. 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を使って列(セルの数)を指定する
  • B!
<table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
いろは
Webのいろは

Relate Post

  • <p>|正しい段落の使い方・記述方法
    <p>|正しい段落の使い方・記述方法
  • <head>・<body> | 2つのHTMLタグの意味・役割と違い
    <head>・<body> | 2つのHTMLタグの意味・役割と違い
  • <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
    <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
  • HTMLでCSSを読み込む3種類の方法
    HTMLでCSSを読み込む3種類の方法

アーカイブ

  • 2018年5月
  • 2018年4月

新着記事

  • <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
    2018-05-12
    <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
  • <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
    2018-05-11
    <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
  • <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
    2018-05-04
    <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
  • <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
    2018-04-30
    <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
  • <h1>~<h6> | 見出しの使い方・記述方法
    2018-04-30
    <h1>~<h6> | 見出しの使い方・記述方法
Webのいろは
  • Webのいろは の利用規約
  • お問い合わせ

Copyright © 2023 Webのいろは All Rights Reserved.