trダグ/表(テーブル)の行

<tr>タグは表の行を示します。

説明

 表を示す<table>タグの中に行を示す<tr>タグを記述し、その中に<th>や<td>を配置する事で表を形成します。

表の行の表示例

構文

 <tr>タグはHTMLボディー内に記述します。構文は以下の通りです。

<tr align="横配置" valign="縦配置">
thやtd等でヘッダやデータを記述
</tr>

 それぞれのオプションの意味は以下の通りです。

【tdタグのオプションの意味】
オプション 指定方法 説明
align center,left,right セルの中の文字をcenterでセンタリング、leftで左寄せ、rightで右寄せします。
valign middle,top,bottom セルの中の文字をmiddleで上下中央、topで上寄せ、bottomで下寄せします。

 セルの中の文字はデフォルトは上下中央で、ヘッダはセンタリング、データは左寄せで表示されます。

 配置自体は<th>タグや<td>タグでセル単位でも指定出来ますが、<tr>タグで指定すると1行に対して一括で指定出来ます。

利用例

 オプションを指定せずに使った時の例は以下の通りです。太字で囲った範囲が1行を示し、その中に<th>タグや<td>タグを使ってヘッダやデータを記述します。

<table border="1" cellpadding="2" cellspacing="1">
<caption>【お奨めキャンプ商品】</caption>
<tr>
<th>製品</th>
<th>A社製</th>
<th>B社製</th>
<th>C社製</th>
</tr>
<tr>
<td>テント</td>
<td>Aテント</td>
<td>Bテント</td>
<td>Cテント</td>
</tr>
<tr>
<td>ランタン</td>
<td>Aランタン</td>
<td>Bランタン</td>
<td>Cランタン</td>
</tr>
</table>

 上記を表示すると以下になります。

【お奨めキャンプ商品】
製品 A社製 B社製 C社製
テント Aテント Bテント Cテント
ランタン Aランタン Bランタン Cランタン

配置の指定

 配置を指定した例は以下の通りです。

<table border="1" cellpadding="2" cellspacing="1">
<caption>【お奨めキャンプ商品】</caption>
<tr align="left" valign="middle">
<th>製品<br>改行で<br>3行</th>
<th>A</th>
<th>B社製</th>
<th>C社製</th>
</tr>
<tr align="center" valign="top">
<td>テント<br>改行で<br>3行</td>
<td>Aテント</td>
<td>B</td>
<td>Cテント</td>
</tr>
<tr align="right" valign="bottom">
<td>ランタン<br>改行で<br>3行</td>
<td>Aランタン</td>
<td>Bランタン</td>
<td>C</td>
</tr>
</table>

 上記では赤字部分で幅を左寄りで上下中央に表示する指定、青字部分でセンタリングして上寄り、緑色部分で右寄せして下寄りに表示する指定をしています。

 つまり、1行目が左寄りで上下中央、2行目がセンタリングして上寄り、3行目が右寄せして下寄りになります。

 これを表示すると以下になります。

【お奨めキャンプ商品】
製品
改行で
3行
A B社製 C社製
テント
改行で
3行
Aテント B Cテント
ランタン
改行で
3行
Aランタン Bランタン C

関連ページ

・ホームページ作成「表の挿入

 単純な表の挿入方法から罫線や幅の指定、セルの結合、CSSも活用したセンタリング方法、色の変更方法、表毎にスタイルを変える方法等を説明しています。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加