【tableタグ】HTMLで表を作ってみよう！「HTML・解説・初心者向け」- ノブレコ

2022年12月19日 2022年11月2日

nobreco

★<table>タグの特徴

・タグのカテゴリ ―― ブロックレベル要素。

・コンテンツモデル ―― フローコンテンツ。

・タグの省略 ―― 不可。（開始タグと終了タグが必要）

・使用可能な親要素 ―― フローコンテンツを許容するすべての親要素。

・グローバル属性を持つ。

・ARIAロール ―― 標準でtableロールを持つ。

<table>の説明

<table>とは

この要素は、HTMLでテーブル（表）全体を表現するために使われるタグです。

table要素単体では機能しいないため、必ず子要素をセットにして使用します。

主に子要素として使用する要素には、「行を表すtr要素」「セルを表すtd要素」「ヘッダー付きセルを表すth要素」の3つがあり、それぞれを適切に必要なだけ組み合わせて記述するのが一般的です。

■使用目的

webページなどの作成で、表組を使って情報を説明をしたい場合に使用します。例えば、サービス内容の料金プランや、企業の概要欄などの作成が挙げられます。

■table要素の主な子要素一覧

要素名	役割
tr 要素	行を表す
td 要素	セルを表す
th 要素	見出しセル
thead 要素	ヘッダー部分の行グループを表す
tbody 要素	メインの中身部分の行グループを表す
tfoot 要素	フッター部分の行グループを表す
caption 要素	表の見出しや説明を表す

■非推奨な属性

・align
・bgcolor
・border
・cellpadding
・cellspacing
・frame
・rules
・summary
・width

使用上の注意点

① 表作成の目的以外に使用しない。

table要素を使ってサイトのレイアウトを作成するのは、正しい使い方ではないので注意が必要です。

今はスマホなどにレスポンシブ対応するデザインが主流になってきていますので、上記のようにtable要素を使った書き方でサイトのレイアウトを行うと、ウインドウに合わせた画面サイズの最適化などができません。

また表に対して使用するtable要素がサイトレイアウトとして使用されている場合、音声読み上げソフトが構造を理解しきれずアクセシビリティの低下などに繋がる恐れがあります。

相応の使い方ではないため、SEO対策の低下も招く恐れがありますので、他の適切なタグの使い方を検討しましょう。

table要素はあくまで表を作成するためのタグです。

内容モデル

table要素の内容モデルは少し複雑です。

・入れられる個数として任意で１個の<caption>要素、1個の<thead>要素、1個の<tfoot>要素、0個以上の<colgroup>要素、0個以上の<tbody>要素を子要素にできます。この他にもscript-supporting-elementsを入れることができますが、他の要素やテキストを入れることはできません。

<tbody>要素については、<tbody>要素の代わりに<tr>要素を子要素として使うことができます。

代わりに使うことができると言っていますが、<tbody>要素はタグの省略が可能であり、<table>要素の中に自動的に補完（記述）されている状態です。ですから正確には、table要素の中には暗黙の<tboby>要素が存在していて、その中に<tr>要素が子要素として記述できるということになります。

なので基本的には<table>要素の直下には<tr>要素を記述するだけで、<tbody>要素が親要素として記述されたことになるので便利です。