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タグを内容に応じて使い分けます。この記事のスライドでそれぞれのタグの使い方を学習します。...
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

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