<TR>テーブルの横の行を表示

<TR>タグは「Table Row」の略称で、テーブル(表)を作成する時に使う<TABLE>内で利用されるタグです。

基本的なテーブル(表)は<TABLE>、<TR>、<TD>タグで作成され、<TR>タグは行を定義します。 配置する箇所は横一列分のデータの最初と最後となります。

なお<TH><TD>といったテーブル(表)内の各セルは、直接<TABLE>~</TABLE>内に入れるのではなく、必ず横一列分ずつ<TR>~</TR>で囲ってまとめなければなりません。

例えば5行のテーブル(表)を作る場合は<TR>~</TR>を5つ分使用することになります。

使用した時の例

<table border="2">
  <tr>
     <th>名前</th>
     <th>説明</th>
     <th>特徴</th>
  </tr>
  <tr>
     <td>カンタルペンシス</td>
     <td>麝香のような香りがするマスクメロン</td>
     <td>皮はごわごわして、いぼを持っているが、食べると甘い!</td>
  </tr>
  <tr>
     <td>マクワウリ</td>
     <td>東方に伝わったウリのひとつ</td>
     <td>品種が多くあり、アメリカンフットボールのような形が特徴</td>
  </tr>
</table>

ブラウザ上の表示例

名前 説明 特徴
カンタルペンシス 麝香のような香りがするマスクメロン 皮はごわごわして、いぼを持っているが、食べると甘い!
マクワウリ 東方に伝わったウリのひとつ 品種が多くあり、アメリカンフットボールのような形が特徴

属性

border(枠線)
bordercolor="" テーブル全体の枠線の色を設定
bordercolorlight="" テーブル全体の枠線のうち、左と上の枠線の色を設定
bordercolordark="" テーブル全体の枠線のうち、右と下の枠線の色を設定
背景
background="画像url" 背景画像の設定
bgcolor="" 背景色の設定
位置
align="left" セルの内容の横方向の位置を指定
  • left・・・左揃え(初期値)
  • center・・・中央揃え
  • right・・・右揃え
  • justify・・・均等割付
  • char・・・指定文字揃え
valign="middle" セルの内容の縦方向の位置を指定
  • top・・・上に寄せる
  • middle・・・中央揃え
  • center・・・中央揃え
  • bottom・・・下に寄せる
  • baseline・・・1行目のベースラインに揃える
char="" 位置を揃える文字を指定
charoff="" セルの左端からどの位置に文字を表示するか指定
height="" セルの高さを指定(ピクセル数)

対応ブラウザなどのデータ

形式 <tr>~</tr> カテゴリ なし
親要素 thead / tbody / tfoot 子要素 th / td / script / template
開始タグ 必須 終了タグ 省略可能
分類 ブロックレベル要素
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

align、char、charoff、valignの各属性がHTML5では廃止。