<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="#CCCCCC" 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> | テーブル(表)の横一行を定義する |