【HTML Living Standard】table要素の使い方
table要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
tableオブジェクトは、表形式のデータを表現するためのHTML要素です。この要素は、情報を行と列に整理して表示する際に使用されます。例えば、製品の価格リストや統計データなど、構造化されたデータをウェブページ上で視覚的に分かりやすく提示するために不可欠です。
table要素内には、表全体のタイトルを表すcaption要素を含めることができ、これにより表の内容を簡潔に説明できます。また、表の構造を明確にするために、thead（ヘッダー行グループ）、tbody（データ行グループ）、tfoot（フッター行グループ）といった要素を配置することが推奨されます。これらのグループ要素の中には、表の行を定義するtr要素が配置されます。さらに、tr要素の中には、ヘッダーセルを表すth要素や、データセルを表すtd要素を配置し、個々の情報を格納します。
これらの要素を構造的に適切に用いることで、ウェブページのコンテンツが持つ意味を明確にし、スクリーンリーダーなどの補助技術を使用するユーザーにとっても内容が理解しやすくなります。table要素は、データを表として表現することに特化しており、ウェブページのレイアウトを整える目的で使用することは推奨されません。現代のウェブ開発では、レイアウトはCSS（Cascading Style Sheets）を用いて制御することが標準的なプラクティスです。データの意味構造を保ちつつ、見た目のデザインはCSSに任せることで、より柔軟でアクセシブルなウェブページを作成できます。
公式リファレンス: <table>: The Table element
構文(syntax)
1<table> 2 <thead> 3 <tr> 4 <th>列ヘッダー1</th> 5 <th>列ヘッダー2</th> 6 </tr> 7 </thead> 8 <tbody> 9 <tr> 10 <td>行1データ1</td> 11 <td>行1データ2</td> 12 </tr> 13 <tr> 14 <td>行2データ1</td> 15 <td>行2データ2</td> 16 </tr> 17 </tbody> 18</table>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません