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開発」を使って学習を進めていただきます。

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

誰向けのプラン?

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

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

プラン内容は?

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

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

1日1回カフェでコーヒー1杯頼むくらいの金額で参加できます

1日1回、カフェでコーヒー1杯分くらいの値段(約330円)」で以下の環境が手に入るとイメージして頂けたらと思います。

  1. コードを添削してもらえる
  2. 学習したことのアウトプットに対してフィードバックしてもらえる
  3. いつでも質問出来る
  4. 週1のオンライン講義に参加できる
  5. 過去のオンライン講義動画を好きな時間に復習できる(いつでも閲覧可能)
  6. 不定期で行うオフラインでの勉強会に参加できる(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
  7. 自分の住まいの近場のメンティーさん同士で集まって、オフラインで勉強会を開くのも可能(初めて開催する場合は事前に僕に連絡をいただけたらと思います)

学習教材には、このサイトで用意している「【学習コンテンツ】Web開発」を使います。

【学習コンテンツ】Web開発」を使って学習を進めることで、Webのフロントエンドとバックエンドのスキルを身につけていくことができます。

プログラミングスクールとの比較

プログラミングスクールに通う場合は1ヶ月で10万円以上するところも多いですし、3ヶ月で50万円、更には100万円するところもあります。

プログラミングスクールの値段が高い理由は、「プログラミングスクールで働いている人の人件費」「就職のサポート」なども含まれているからです。

10万円50万円100万円」のいずれの場合も、自己投資とはいえ、支払うのにはだいぶ勇気がいる金額かと思います。

オススメの学習方法

個人的にオススメするのは、プログラミングのできるメンター(師匠)を見つけて、まずは1ヶ月プログラミング学習をしてみて、自分にプログラミングが向いているかどうか確かめてみることです。

10万円50万円100万円」を払って、学習していく中で「やっぱり自分にはプログラミングは向いてない」と判断した場合、その金額はかなりの痛手となります。

そのため、まずは「これくらいの金額なら最悪失っても痛くないな」の値段で教えてくれるメンターを見つけて、そのメンターに色々と質問をしてみましょう。

それで、「良さそうだな」と思ったら教えてもらうといった流れで学習を始めると、金額もだいぶ節約できます。

注意点

ただし、参加者が増えてきたら、1人1人へのサポートの質を維持するのが難しくなるので、値上げする可能性もあります。

値上げする理由は次の以下の理由となります。

  • 値段を上げて参加ハードルをあげることで、自己解決スキルも身につけたいと考えている学習意欲の高い人だけが参加するようになる
    • 調べたらすぐにわかることを、自分で調べずに何でもかんでも質問すると、自己解決スキルも身につかない
    • 更に、他のメンティーさんの対応する時間が取れなくなりサポートの質の低下にも繋がる

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

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

 

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

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

COMMENT

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