<tr>テーブルの行を定義する

<tr>タグは、テーブル(表)の横1行(table row)を表します。

tr要素は<table>、または<thead><tbody><tfoot>などの子要素しても利用する事ができます。 テーブルの基本的な構造としては、<table>~</table>内に<tr>~</tr>を配置し、横1行を定義します。 さらにその中にth要素やtd要素を配置する事でデータセルを表すことができます。

ただしtable要素の直下にtbody要素とtr要素を混在して配置する事はできないので注意して下さい。

HTML5での変更点

HTML5のtr要素では、align属性、valign属性、bgcolor属性、char属性、charoff属性が廃止されています。 またtr要素内へのtd要素の配置は必須ではなくなりました。

書式

  • <tr 属性="値">~</tr> ……… 表の行を定義する

使用した時の例

<table border="1">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>内容1-1</td>
    <td>内容2-1</td>
    <td>内容3-1</td>
  </tr>
  <tr>
    <td>内容1-2</td>
    <td>内容2-2</td>
    <td>内容3-2</td>
  </tr>
</table>


<!-- tbodyなどを使用した場合 -->
<table border="1">
 <thead>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>内容1-1</td>
    <td>内容2-1</td>
    <td>内容3-1</td>
  </tr>
  <tr>
    <td>内容1-2</td>
    <td>内容2-2</td>
    <td>内容3-2</td>
  </tr>
 </tbody>
</table>

ブラウザ上の表示例

見出し1 見出し2 見出し3
内容1-1 内容2-1 内容3-1
内容1-2 内容2-2 内容3-2
見出し1 見出し2 見出し3
内容1-1 内容2-1 内容3-1
内容1-2 内容2-2 内容3-2

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

形式 <tr>~</tr> カテゴリ なし
親要素 thead,tbody,tfoot 子要素 th,td,script,template
開始タグ 必須 終了タグ 省略可能
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~