trタグの使い方と表の行を適切に整理・表示する方法をわかりやすく解説

INDEX

trの概要

trの概要

表の行を定義する HTMLタグ

<tr><td>データ</td></tr>

概要 trタグは、tableタグの中で表の行を定義するためのHTMLタグです。th（見出しセル）やtd（データセル）を内包し、テーブルの行を作成します。

表の各行を定義するために使用される。
1つのtrタグの中に複数のtdまたはthを配置できる。
thead、tbody、tfootと組み合わせて使用できる。
表に関するタグには、table、tr、th、td、thead、tbody、tfoot、captionがある。

trタグの基本的な使い方

以下の例では、trタグを使って表の行を定義しています。

<table border="1">
    <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>職業</th>
    </tr>
    <tr>
        <td>田中</td>
        <td>30</td>
        <td>エンジニア</td>
    </tr>
    <tr>
        <td>佐藤</td>
        <td>25</td>
        <td>デザイナー</td>
    </tr>
</table>

実行例：

名前	年齢	職業
田中	30	エンジニア
佐藤	25	デザイナー

trタグの応用：セルの結合

colspanやrowspan属性を使うことで、セルの結合が可能です。

<table border="1">
    <tr>
        <th colspan="2">氏名</th>
        <th>年齢</th>
    </tr>
    <tr>
        <td>田中</td>
        <td>一郎</td>
        <td>30</td>
    </tr>
    <tr>
        <td rowspan="2">佐藤</td>
        <td>花子</td>
        <td>25</td>
    </tr>
    <tr>
        <td>次郎</td>
        <td>20</td>
    </tr>
</table>

実行例：

氏名		年齢
田中	一郎	30
佐藤	花子	25
佐藤	次郎	20

注意事項

trタグは、tableタグの中でのみ使用できる。
trタグの中には、必ずthまたはtdタグを含める。
CSSで:nth-child()を使うと、交互に行の背景色を変更できる。
行を結合する場合、rowspanを適用すると便利。

よくある質問

Q: trタグの中に直接テキストを入れられますか？: A: いいえ、thまたはtdを入れないとエラーになる場合があります。
Q: trタグをCSSでスタイリングできますか？: A: はい、背景色やボーダーなどを変更できます。
Q: trタグをネストできますか？: A: いいえ、trタグは入れ子にできません。
Q: trタグを削除するとどうなりますか？: A: その行全体が削除され、表の構造が変わります。

まとめ

trタグは、テーブルの行を定義するためのタグ。
thやtdタグと組み合わせて使用する。
行ごとのデザインをCSSで変更できる。
セルの結合にはcolspanやrowspanを利用する。