HTML <tr> タグ

定義と使用方法

<tr> タグが含まれています。HTMLテーブルの行を定義します。

<tr> 要素は1つ以上の <th> または <td> 要素。

参照もどうぞ：

HTMLチュートリアル：HTML テーブル

HTML DOM リファレンスマニュアル：TableRow オブジェクト

CSSチュートリアル：テーブルスタイルの設定

例

例 1

シンプルな3行のHTMLテーブル；1つのヘッダーレイアウトと2つのデータレイアウト：

<table>
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>￥4500</td>
  </tr>
</table>

自分で試してみてください

例 2

どのように整列するか： <tr> 中の内容（CSSを使用）：

<table style="width:100%">
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr style="text-align:right">
    <td>1月</td>
    <td>￥3400</td>
  </tr>
</table>

自分で試してみてください

例 3

テーブル行に背景色を追加する方法はどうですか（CSSを使用）：

<table>
  <tr style="background-color:#FF0000">
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
 </table>

自分で試してみてください

例 4

垂直に整列する方法はどうですか： <tr> 中の内容（CSSを使用）：

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>1月</td>
    <td>￥3400</td>
  </tr>
</table>

自分で試してみてください

例 5

テーブルタイトルの作成方法はどうですか：

<table>
  <tr>
    <th>名前</th>
    <th>電子メール</th>
    <th>電話</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

自分で試してみてください

例 6

タイトル付きテーブルの作成方法はどうですか：

<table>
  <caption>月別貯金</caption>
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>￥4500</td>
  </tr>
</table>

自分で試してみてください

例 7

行や列をまたぐテーブルセルの定義方法はどうですか：

<table>
  <tr>
    <th>名前</th>
    <th>電子メール</th>
    <th colspan="2">電話</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

自分で試してみてください

グローバル属性

<tr> タグは以下のイベント属性をサポートしています HTMLでのグローバル属性。

イベント属性

<tr> タグは以下のイベント属性をサポートしています HTMLでのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <tr> 要素：

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート