<tr> テーブル（表）の横一行を定義する
- 対応ブラウザ
-
| タイプ | - |
| 取り扱い | 標準 |
<tr>タグは、テーブル（表）の横一行を定義したい場合に使用します。
テーブル作成の基本的な流れは以下の通り。
1. まず<table>タグで表の作成を開始します
2. 次に<tr>タグで表の横一列を定義します
3. そして<td>タグで表の縦のセルを定義します
<tr>タグに指定できる属性
- align="値（left, center, right）"
- テーブルの表示位置を指定します。
- valign="値（top, middle, bottom, baseline）"
- セルの内容物の縦軸に対する表示位置を指定。
- width="値（数値）"
- テーブルセルの幅を指定します。
- height="値（数値）"
- テーブルセルの高さを指定します。
- style="プロパティ:値;"
- スタイルを指定します。
- id="", class=""
- idやclass付けが出来ます。
<tr>の使用サンプル
HTML
<table border="1" bordercolor="#AAAAAA" bgcolor="#FFFFFF" cellpadding="3"> <caption>CAPTION(キャプション)</caption> <tr> <th align="center" colspan="3">テーブルの作成</th> </tr> <tr> <td>1</td> <td>TABLE</td> <td>テーブル全体の開始</td> </tr> <tr> <td>2</td> <td>TR</td> <td>横一列を定義する</td> </tr> <tr> <td>3</td> <td>TD</td> <td>TRの中にセルを作成</td> </tr> <tr> <td>4</td> <td>/TD</td> <td>セル内の内容を記述してセルを閉じる</td> </tr> <tr> <td>5</td> <td>TD～/TD</td> <td>複数セルを表示させる場合には繰り返しTDを記述</td> </tr> <tr> <td>6</td> <td>/TR</td> <td>一行分の記述が終わったらTRを閉じる</td> </tr> <tr> <td>7</td> <td>TR, TD, /TD, /TR</td> <td>必要回数繰り返す</td> </tr> <tr> <td>8</td> <td>/TABLE</td> <td>テーブル全体を終了させる</td> </tr> </table>
表示確認
| テーブルの作成 | ||
|---|---|---|
| 1 | TABLE | テーブル全体の開始 |
| 2 | TR | 横一列を定義する |
| 3 | TD | TRの中にセルを作成 |
| 4 | /TD | セル内の内容を記述してセルを閉じる |
| 5 | TD～/TD | 複数セルを表示させる場合には繰り返しTDを記述 |
| 6 | /TR | 一行分の記述が終わったらTRを閉じる |
| 7 | TR, TD, /TD, /TR | 必要回数繰り返す |
| 8 | /TABLE | テーブル全体を終了させる |
※見やすくするためにCSSで装飾しています
<tr>に関連するHTMLタグ
| テーブル（表）に関連する要素 | |
|---|---|
| <caption> | テーブル（表）にタイトルを付ける |
| <col> | テーブル（表）の縦列の属性をまとめて指定する |
| <colgroup> | テーブル（表）の縦列をグループ化する |
| <table> | テーブル（表）を作成する |
| <tbody> | テーブル（表）のボディ部分を定義する |
| <td> | テーブル（表）のセルを作成する |
| <tfoot> | テーブル（表）のフッタ行を定義する |
| <th> | テーブル（表）の見出しとなるセルを作成する |
| <thead> | テーブル（表）のヘッダ行を定義する |
| <tr> | テーブル（表）の横一行を定義する |