HTML

図解付き!HTMLのテーブルの作成方法【タグの使い方を覚える】

どうも、つよぽんです!

今回はHTMLのテーブルの作成方法について図を使いながら解説します。

次のような人にとって今回の記事は参考になります。

想定読者
  • HTMLのテーブル自体わからない
  • HTMLのテーブルの作成方法がわからない
  • HTMLのテーブル作成のために用意されている複数のタグをどのように使い分ければよいかわからない

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
HTMLのテーブルの使い方を覚えるHTMLのテーブル(表)の作り方を学習します。HTMLでテーブルを作成するためには、table, thead, tbody, tr, th, tdタグを内容に応じて使い分けます。この記事のスライドでそれぞれのタグの使い方を学習します。...

今回の内容は以下のとおりです。

今回の内容
  • HTMLのテーブルとは
  • HTMLのテーブルの作成に使うタグの種類を知る

 

HTMLのテーブルとは

HTMLのテーブルとは、「エクセルの表」のようなものです。

次の画像はHTMLで作成したテーブルのサンプル画像です。

テーブルのサンプルテーブルのサンプル

上の画像を見るとエクセルの表と同じように「列(縦列)」と「行(横列)」からなるデータ一覧表となっています。

テーブルの構成
  • 列(縦列) : データの種類ごとに分けられる
  • 行(横列) : 実際のデータが投入される

上の画像を見ると、には「番号」「名前」「性別」のようにデータの種類が分けられていて、行には、「1」「つよぽん」「」のように実際のデータが投入されているのがわかるかと思います。

このように、「エクセルの表」に似た形式の見た目のものが「テーブル」となります。

HTMLのテーブルの作成に使うタグの種類を知る

それでは、実際にHTMLでテーブルを作成するにはどのようなタグを使えばよいのでしょうか?

テーブルを作成するタグは6種類あり、場面に応じて使い分けます。

5種類のテーブルタグ
  1. tableタグ
  2. theadタグ
  3. tbodyタグ
  4. trタグ
  5. thタグ
  6. tdタグ

それぞれのタグがどの場面で使われるのかそれぞれ解説していきます。

tableタグ

tableタグはテーブルを作成する際のルート(根っこ)のタグとなります。

このtableタグの中に、さきほど紹介したtheadタグとtbodyタグを含めます。

tableタグのサンプルtableタグのサンプル

上の画像のコードが読みづらい場合は、以下のリンクからコード内容とコードの出力結果を確認できます。

上の画像の右側にある赤枠内のコードを見ると、tableタグがルートとなり、その中にtheadタグtbodyタグがあるのがわかります。

イメージとしては、htmlタグの中にheadタグbodyタグがあるような感じで、これがテーブルになるとtableタグhtmlタグと同じような立ち位置になるイメージです。

theadタグ

theadタグは、テーブルの中でタイトル(見出し)を表す行に利用するタグになります。

エクセルの表だと1行目がタイトル(見出し)となっていることが多いですが、HTMLのテーブルもエクセルの表と似た見た目となるので、1行目が見出しとなることが多いです。

次の画像はtheadタグを使っている部分を赤枠内で囲っています。

theadのサンプルtheadのサンプル

上の画像のコードが読みづらい場合は、以下のリンクからコード内容とコードの出力結果を確認できます。

ここで注意したいのは、あくまでもtheadタグは見出しの行に使うためのタグなので、実データを表す行には使いません。

実データを表す行を使う場合は次に説明するtbodyタグを使います。

tbodyタグ

tbodyタグは実データを表す行に利用します。

エクセルの表だと2行目以降が実データとなっていることが多いですが、HTMLのテーブルもエクセルの表と似た見た目となるので、2行目以降に実データを投入することが多いです。

次の画像はtbodyタグを使っている部分を赤枠内で囲っています。

tbodyのサンプルtbodyのサンプル

上の画像のコードが読みづらい場合は、以下のリンクからコード内容とコードの出力結果を確認できます。

上の図の赤枠内を見ると、theadタグのときと異なり、tbodyタグが複数行(2行以上)にまたがって使われているのがわかります。

基本的にタイトル(見出し)を表す行は1行目で完結するので、theadタグは1行にしか使われないことが多いです。

theadタグは見出しを表す行」「tbodyタグはデータを表す行」に使いますが、改行はどのようにするのでしょうか?

特にtbodyの場合は、複数行にまたがってデータを表示しますが、あるタグを利用しないと改行されずに、ずっと横並びでデータが表示されてしまいます。

そのあるタグとは次に説明する「trタグ」のことです。

trタグ

trタグはテーブルの行を表すタグで、行ごとにtrタグで囲むことで改行することが出来ます。

行ごとにtrタグで囲む」について、言葉だけだと理解が難しいと思うので、実際に画像を見ながらどのように改行をしているか確認しましょう。

trタグのサンプルtrタグのサンプル

上の画像のコードが読みづらい場合は、以下のリンクからコード内容とコードの出力結果を確認できます。

上の画像で赤枠で囲っているところがtrタグで行を定義しているところになります。

実際に画像中央の出力結果を見ると、trタグを使った回数分だけ改行がされて3行のテーブルが出来ているのがわかるかと思います。

このように、trタグを使うことで行を表すことが出来ました。

では、実際に行の中でセル(1マス)ごとタイトル(見出し)や、データを投入するにはどうしたら良いのでしょうか?

タイトル(見出し)を表すセルには「thタグ」を使い、データを表すセルには「tdタグ」を利用します。

それではthタグtdタグの解説を1つずつしていきます。

thタグ

thタグタイトル(見出し)を表すセルに対して利用します。

theadタグとの違いは、theadタグタイトルを表すに使うことです。

あらためてthとtheadの違いをまとめると次のとおりです。

thとtheadの違い
  • thタグ : タイトルを表すセルに使う
  • theadタグ : タイトルを表すに使う

画像を使ってthタグがどのように使われているか確認してみましょう。

thタグのサンプルthタグのサンプル

上の画像のコードが読みづらい場合は、以下のリンクからコード内容とコードの出力結果を確認できます。

上の画像の赤枠内を確認すると、タイトルを表すセル(1マス)thタグが使われているのがわかるかと思います。

また、thタグで囲った文字はデフォルトで太字になるので、タイトルとデータがすぐに見分けられるようになっています。

それでは最後にデータを表すセルである「tdタグ」を見ていきましょう。

tdタグ

tdタグデータを表すセル(1マス)に使われるタグです。

tdタグがどのように使われるか画像を使って確認しましょう。

tdタグのサンプルtdタグのサンプル

上の画像のコードが読みづらい場合は、以下のリンクからコード内容とコードの出力結果を確認できます。

上の画像の赤枠内を確認すると、データを表すセル(1マス)tdタグが使われているのがわかるかと思います。

thタグと異なり、tdタグはデフォルトでは太字にならないので、上の画像のテーブルの出力結果を確認すると、1行は太字になっているのに対して、2行目以降は細い字のままになっているのがわかるかと思います。

まとめ

ここまで、「HTMLのテーブルとは何か」、「HTMLのテーブルを作成するのに使われるタグ」について説明してきました。

HTMLのテーブルを作成するのに使われるタグとして次の6種類を解説しました。

6種類のテーブルのタグ
  1. tableタグ : テーブルのルートとなるタグ
  2. theadタグ : テーブルの見出しを表すに使われるタグ
  3. tbodyタグ : テーブルのデータを表すに使われるタグ
  4. trタグ : テーブル内で改行を行うタグ
  5. thタグ : テーブルの見出しを表すセルに使われるタグ
  6. tdタグ : テーブルのデータを表すセルに使われるタグ

今回の内容は以下の記事のスライドの一部を図(画像)として利用しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLのテーブルの使い方を覚えるHTMLのテーブル(表)の作り方を学習します。HTMLでテーブルを作成するためには、table, thead, tbody, tr, th, tdタグを内容に応じて使い分けます。この記事のスライドでそれぞれのタグの使い方を学習します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です