【HTML Living Standard】tr要素の使い方
tr要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
trオブジェクトは、HTMLドキュメント内でテーブル（表）の行を表すオブジェクトです。ウェブページに表形式のデータを表示する際に使用され、<table>要素の内部に配置されます。具体的には、<table>要素の直下、または<thead>（テーブルヘッダー）、<tbody>（テーブル本体）、<tfoot>（テーブルフッター）といったテーブルセクショニング要素の内部に、テーブルの各行を定義するために用いられます。
このtrオブジェクトは、子要素として<th>（テーブルヘッダーセル）または<td>（テーブルデータセル）のみを持つことができます。<th>要素は行や列の見出し、つまりその内容を説明するセルに使用され、<td>要素は実際のデータを含むセルに使用されます。これにより、テーブル内の個々のデータを整然と並べ、視覚的にも構造的にも分かりやすく整理することが可能になります。
例えば、ユーザー一覧や商品リストなど、行と列で構成される情報を表示する際には、まず<table>要素で表全体を定義し、次に各行をtrオブジェクトで作成し、その中に<th>や<td>で個々のセルを配置するという流れでHTMLを記述します。trオブジェクトは、テーブルのデータを意味のある行にまとめることで、ウェブコンテンツの構造化とアクセシビリティの向上に貢献する基本的な要素です。
構文(syntax)
1<table> 2 <tr> 3 <td>データセル1</td> 4 <td>データセル2</td> 5 </tr> 6</table>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML tr/td 要素でテーブルを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML tr/td 要素のサンプル</title> 7</head> 8<body> 9 <!-- <table>要素は、表（テーブル）全体を定義します --> 10 <table> 11 <!-- <thead>要素は、テーブルのヘッダー部分を定義します --> 12 <thead> 13 <!-- <tr>要素は、テーブルの行（Table Row）を定義します --> 14 <tr> 15 <!-- <th>要素は、ヘッダーセル（Table Header Cell）を定義します --> 16 <th>項目</th> 17 <th>値</th> 18 </tr> 19 </thead> 20 <!-- <tbody>要素は、テーブルの本体部分（データ行）を定義します --> 21 <tbody> 22 <!-- 最初のデータ行を定義します --> 23 <tr> 24 <!-- <td>要素は、データセル（Table Data Cell）を定義します --> 25 <td>商品名</td> 26 <td>りんご</td> 27 </tr> 28 <!-- 2番目のデータ行を定義します --> 29 <tr> 30 <td>価格</td> 31 <td>150円</td> 32 </tr> 33 <!-- 3番目のデータ行を定義します --> 34 <tr> 35 <td>数量</td> 36 <td>3個</td> 37 </tr> 38 </tbody> 39 </table> 40</body> 41</html>
HTMLのtr要素は、ウェブページで表（テーブル）を作成する際に、その「行」を定義するために使用されます。trは「Table Row（テーブルの行）」の略で、必ず<table>要素の中に配置され、表の縦方向の構造を形成します。
このサンプルコードでは、まず<table>要素で表全体を定義し、その中に表のヘッダー部分を示す<thead>と、データ本体部分を示す<tbody>があります。それぞれの行を表現するために<tr>が使われています。
<tr>の中には、表の個々のセルを定義する要素が入ります。具体的には、ヘッダー行のセルには<th>（Table Header Cell、見出しセル）が使われ、「項目」や「値」のように、その列の内容を説明する役割を持ちます。一方、データ行のセルには<td>（Table Data Cell、データセル）が使われ、「商品名」や「りんご」といった具体的なデータを表示します。
tr要素自体は、特定の引数（入力値）を受け取ったり、処理結果を戻り値として返したりする機能はありません。trはあくまで表の構造を定めるための入れ物のような要素であり、その中にthやtdといったセル要素を配置することで、表の具体的な内容が構成されます。このように、tr要素は表の行を整理し、視覚的にも構造的にも情報を分かりやすく表示するために不可欠な要素です。
<tr>要素は、必ず<table>、<thead>、<tbody>、<tfoot>といった表の構造を定義する要素の直接の子要素として配置します。<tr>の中には、セルの内容を示す<th>（ヘッダーセル）または<td>（データセル）のみを記述し、他の要素を直接置かないように注意してください。各行（<tr>）に含まれるセル（<th>または<td>）の数は、表の列数を正しく表現するために統一することが基本です。<th>と<td>を適切に使い分けることで、見た目だけでなく、スクリーンリーダーなどの補助技術にも表の構造が正しく伝わり、アクセシビリティが向上します。
html tr要素でテーブルの行を作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>tr要素のサンプル</title> 7 <style> 8 table, th, td { 9 border: 1px solid black; 10 border-collapse: collapse; 11 padding: 8px; 12 } 13 </style> 14</head> 15<body> 16 17 <h1>tr要素の例</h1> 18 19 <table> 20 <thead> 21 <!-- tr要素: テーブルの行を表します --> 22 <tr> 23 <th>名前</th> 24 <th>年齢</th> 25 <th>職業</th> 26 </tr> 27 </thead> 28 <tbody> 29 <!-- tr要素: テーブルの行を表します --> 30 <tr> 31 <td>山田 太郎</td> 32 <td>30</td> 33 <td>エンジニア</td> 34 </tr> 35 <!-- tr要素: テーブルの行を表します --> 36 <tr> 37 <td>鈴木 花子</td> 38 <td>25</td> 39 <td>デザイナー</td> 40 </tr> 41 </tbody> 42 </table> 43 44</body> 45</html>
HTMLにおけるtr要素は、Webページ上で表（テーブル）を作成する際に、その個々の行（Table Row）を定義するために使用されます。trは「table row」の略であり、テーブルの構造を構成する上で非常に重要な役割を果たします。
この要素は、必ず<table>要素の内部に配置され、その中でさらに<th>要素（テーブルの見出しセル）または<td>要素（テーブルのデータセル）を子要素として持ちます。これにより、一つのtr要素が一つの水平な行を形成し、その行内に複数のセルが配置されることになります。
tr要素自体に特定の引数や戻り値はありません。これは、trがHTMLの構造を定義する要素であり、プログラミング言語のような関数呼び出しやデータ操作の概念とは異なるためです。その役割は、あくまでテーブルの行という構造的なブロックを提供することにあります。
提供されたサンプルコードでは、まず<table>要素でテーブル全体を定義し、その中に<thead>（テーブルヘッダー）と<tbody>（テーブル本体）を配置しています。<thead>内の一番最初の<tr>要素は、「名前」「年齢」「職業」といったテーブルの項目名（ヘッダー）を定義しており、それぞれのセルは<th>要素で記述されています。続く<tbody>内では、複数の<tr>要素がそれぞれデータ行を表しており、「山田 太郎」「30」「エンジニア」や「鈴木 花子」「25」「デザイナー」といった具体的なデータが<td>要素として格納されています。このように、tr要素は、ヘッダー行とデータ行を区別しつつ、テーブルの視覚的なレイアウトと意味的な構造を整えるために不可欠な要素です。
tr要素は、HTMLのテーブルにおいて一つの「行」を定義するために使われる重要な要素です。必ず<table>要素の子要素である<thead>、<tbody>、<tfoot>のいずれか、または直接<table>の直下に配置する必要があります。tr要素の直接の子要素には、テーブルヘッダーを表す<th>要素か、テーブルデータセルを表す<td>要素のみを配置してください。これ以外の要素を直接含めると、HTMLの構造が不正になり、ブラウザでの表示が崩れたり、スクリーンリーダーなどの補助技術での読み上げに問題が生じたりする可能性があります。テーブルは表形式のデータを正しく表現するためのものであり、視覚的なレイアウト目的での使用は避け、CSSでデザインを調整することを心がけましょう。