trタグ -table内で行（Row）を作成する｜HTML辞典

<tr>タグとは？

<tr> タグは、HTML の <table>（表）内で行（Row）を作成するためのタグです。
<th>（ヘッダーセル）や <td>（データセル）と組み合わせて使用します。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）。

閉じタグの有無

<tr> は 開始タグ（<tr>）と閉じタグ（</tr>）の両方が必要 です。

基本的な記述方法

<table>
    <tr>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>100円</td>
    </tr>
    <tr>
        <td>バナナ</td>
        <td>150円</td>
    </tr>
</table>

この記述により、3 行の表 が作成されます。

使用できる主な属性

<tr> タグには特別な属性はありません。

CSSを使ったデザイン変更

<tr> のデフォルトのスタイルは 特に指定されていません が、CSS で背景色や行の間隔をカスタマイズできます。

tr {
    border-bottom: 1px solid #ccc;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

適切な使用例

✅ テーブルの各行を作成する

<table>
    <tr>
        <th>商品</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>みかん</td>
        <td>200円</td>
    </tr>
    <tr>
        <td>ぶどう</td>
        <td>300円</td>
    </tr>
</table>

✅ <thead>, <tbody>, <tfoot> と組み合わせて使用する

<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
        </tr>
        <tr>
            <td>バナナ</td>
            <td>150円</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>250円</td>
        </tr>
    </tfoot>
</table>

適切でない使用例（誤った使い方）

❌ <tr> を <table> の外に記述する

<!-- NG: <table> の外に <tr> を記述 -->
<tr>
    <td>データ</td>
</tr>
<table>
    <tr>
        <td>りんご</td>
    </tr>
</table>

✅ 正しい書き方（<table> 内に記述）

<table>
    <tr>
        <td>りんご</td>
    </tr>
</table>

❌ <tr> なしで <td> を記述する

<!-- NG: <tr> を省略 -->
<table>
    <td>データ1</td>
    <td>データ2</td>
</table>

✅ 正しい書き方（<tr> で行を定義）

<table>
    <tr>
        <td>データ1</td>
        <td>データ2</td>
    </tr>
</table>

<tr>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<tr>	行を作成する	<th> や <td> を内包	表の行
<th>	見出しセルを作成する	太字＋中央寄せ（デフォルト）	列名やカテゴリー名
<td>	データセルを作成する	一般的なデータ用	数値やテキストの表示
<thead>	ヘッダーをグループ化	<tr> を含む	表の見出し行
<tbody>	データ部分をグループ化	<tr> を含む	メインのデータ行
<tfoot>	フッターをグループ化	<tr> を含む	合計や備考などの行

使用上の注意点

✅ <tr> は <table> 内でのみ使用する

• <table> の外では無効になるため、必ず表の中で使用する。

✅ <th> や <td> とセットで使用する

• <tr> 内に <td> または <th> を記述しないと意味をなさない。

✅ <thead>, <tbody>, <tfoot> を適切に使うと、可読性が向上する

• アクセシビリティや SEO にも有利になる。

関連タグ

• <table> – 表を作成
• <caption> – 表のタイトルを指定
• <th> – 見出しセルを作成
• <td> – データセルを作成
• <thead> – ヘッダー部分をグループ化
• <tbody> – データ部分をグループ化
• <tfoot> – フッター部分をグループ化

まとめ

<tr> タグは、HTML の 表の行を作成するためのタグ です。
適切に使用することで、データの可読性が向上し、アクセシビリティや SEO にも貢献します。