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

プラン契約者数が35人に達したら値上げする予定です

現在の値段は10000円です。

つまり、「月の飲み会3回くらいの金額」となります。

飲み会に行く代わりに、学習時間を優先すると考えれば自己投資としてはだいぶリーズナブルかと思います。

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

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

ただ、プラン契約者数が35人に達したら15000円値上げする予定です。
(2019年2月13日現在のプラン契約者数は27人)

値上げする理由は次のとおりです。

値上げ理由
  1. このプランを始めた当初(2018年9月)と比べて、学習コンテンツ(スライド・課題・動画)が充実してきた
  2. このプランに参加していただいているメンティーさんの中から、「Web未経験から学習を初めて2~3ヵ月くらいで案件獲得までこぎつけることができた」という実績ができた
  3. 学習サポート(コードレビューや質疑応答など)を1人で行っており、人数が増えすぎるとサポートに支障が出てくるため、値上げという形で参加ハードルをあげた
    (人数を制限することによりサポートの質を維持するため)

今後も契約者が増えたり、学習コンテンツがさらに充実していった場合は段階的に料金改定させていただく予定です。

契約した時点の金額がずっと継続される

現在、学習プランを提供しているプラットフォームである「MENTA」の性質上、契約した時点の金額は変わることがありません。

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

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

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

 

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

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

COMMENT

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