HTMLのネスト構造のテーブルの作り方を現役デザイナーが解説【初心者向け】

初心者向けにHTMLのネスト構造のテーブルの作り方について解説しています。最初にtableタグ、trタグ、tdタグを使った基本のテーブルの作成方法を説明します。次にテーブルをネスト構造で作成する場合の書き方をサンプルコードで見ていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLのネスト構造のテーブルの作り方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

ネスト構造のテーブルの作り方について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLの基本的なテーブルの作り方 (table要素、tr要素、td要素などの使い方)

HTMLでテーブルを作るには
  • table要素
  • tr要素
  • td要素
  • th要素
を用いてマークアップをしていきます。
まずはtable要素を用いて表組み全体にするマークアップをしていきます。そして横1行の中にセルがいくつか入るように表を構成していきます。横1行をtr要素で囲み、そのなかのセルはtd要素で構成されることになります。
td要素を多くもつことはできますが、そのなかのセルに「見出し」の意味を持たせたいものにはtd要素ではなく、th要素を用いてマークアップしていきます。
表の中のセルは全てtd要素とすることもできますが、見出し部分の背景を目立たせたい場合などはth要素でマークアップしてうえでCSSで装飾をしていきます。

 

ネスト構造のテーブルの作り方 (テーブルを複数の要素で構成する方法)

ネスト構造とは入れ子にしている構造のことを指します。
入れ子とは開始タグと閉じタグに同じ階層で囲っていくことを言い、HTMLでテーブルを作る場合には必ずtableタグで開始し、tableの閉じタグで囲うように表記します。
table要素の中にtr要素、tr要素の中にtd要素を記述していきます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

テーブルを作成していきます。

実際にネスト構造にする場合には半角スペースで2個程度字下げをおこない、開始タグと閉じタグの上下の位置をあわせるようにすると、確認をしやすく綺麗に記述することができます。

<table>

  <tr>

    <th>タイトル1</th><td>データ1</td><td>データ2</td><td>データ3</td>

  </tr>

  <tr>

    <th>タイトル2</th><td>データ1</td><td>データ2</td><td>データ3</td>

  </tr>

  <tr>

    <th>タイトル3</th><td>データ1</td><td>データ2</td><td>データ3</td>

  </tr>

</table>

 

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。