HTML5でのテーブルの入れ子ルールとは【メンターが回答】

「HTML5の仕様でネストしたテーブルは許可されているかどうかわかりません。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。ネスト(入れ子)についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

HTML5でのテーブルの入れ子ルールだね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

以下のようなネストしたテーブルは、HTML5の仕様で許可されているのでしょうか?

「許可されている/されていない」が明記されているならば、その部分も教えていただきたいです。

 

該当のソースコード

<table id="parent-table">
    <tr>
      <td>parent-cell0</td>
      <td>parent-cell1
        <table id="child-table">
          <tr>
            <td>nest-cell</td>
          </tr>
        </table><!-- End #child-table -->
      </td>
    </tr>
  </table><!-- End #parent-table -->

 

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

メンターからの回答

w3cのHTML5の日本語訳によると、仕様としては許可されているようです。

https://momdo.github.io/html5/tabular-data.html#the-td-element
tdのコンテンツモデルは「フローコンテンツ」

https://momdo.github.io/html5/tabular-data.html#tabular-data
tableは「フローコンテンツ」で、この要素を使用できるコンテキストは「フローコンテンツが期待される場所」

 

ネスト(入れ子)とは

一つの要素の中に親要素・子要素といった形で上下関係を作ることをネストと言います。

<html>という親要素の中に<head>や<body>といった子要素が記述されるようなもので、<html>が子要素になることはないといったHTMLでのルールが決められています。

今回のケースでは、テーブルの中に子テーブルを作成することは問題ありません。

 

以上、HTML5でのテーブルの入れ子ルールについて解説しました。

TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。

他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。

 

回答してくれたメンター

鵜澤 峻平(うさわしゅんぺい)

現在はフリーランスのエンジニアをしていてプログラミング歴は5年目になります、普段は Rails、Laravel、Node.js等を使って Web、モバイルアプリケーションを作成しています。開発実績としては、いくつかの Web サービス、コンシューマー向けモバイルアプリケーション、NPO サイトリニューアル、ロボット用プログラムなどがあります。

TechAcademyでメンターをはじめたのは、「プログラミングでやりたいことがある人を応援したい」、「講師と受講者が話し合って学び方を決めていく」に惹かれたからです。

 

大石ゆかり

回答分かりやすかったです!

田島悠介

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

大石ゆかり

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

 

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

CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。

独学に限界を感じている場合はご検討ください。