Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】tr要素の使い方

tr要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

trオブジェクトは、HTMLドキュメント内でテーブル(表)の行を表すオブジェクトです。ウェブページに表形式のデータを表示する際に使用され、<table>要素の内部に配置されます。具体的には、<table>要素の直下、または<thead>(テーブルヘッダー)、<tbody>(テーブル本体)、<tfoot>(テーブルフッター)といったテーブルセクショニング要素の内部に、テーブルの各行を定義するために用いられます。

このtrオブジェクトは、子要素として<th>(テーブルヘッダーセル)または<td>(テーブルデータセル)のみを持つことができます。<th>要素は行や列の見出し、つまりその内容を説明するセルに使用され、<td>要素は実際のデータを含むセルに使用されます。これにより、テーブル内の個々のデータを整然と並べ、視覚的にも構造的にも分かりやすく整理することが可能になります。

例えば、ユーザー一覧や商品リストなど、行と列で構成される情報を表示する際には、まず<table>要素で表全体を定義し、次に各行をtrオブジェクトで作成し、その中に<th><td>で個々のセルを配置するという流れでHTMLを記述します。trオブジェクトは、テーブルのデータを意味のある行にまとめることで、ウェブコンテンツの構造化とアクセシビリティの向上に貢献する基本的な要素です。

公式リファレンス: <tr>: The Table Row element

構文(syntax)

1<table>
2  <tr>
3    <td>データセル1</td>
4    <td>データセル2</td>
5  </tr>
6</table>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ