【HTML】trタグで表の行を定義する方法の解説

このページについて

このページではHTMLタグのtableタグで使用するtrタグの使い方を解説しています。

tableタグを生成することができるページを公開しました。まだ色々と機能不足で基礎的なコードしか生成できませんが、今後もちまちま更新予定です。

trタグはtableタグでのみ使用します。table-rowの略称でtrタグなんですが、そもそものrowとは「行」を意味する単語です。つまり「trはテーブルの行を定義」するタグとなります。

tableの構造についてはtableタグのところで紹介していますが、一応こちらでも簡単に書くと「縦横のデータセルを並べる」というものです。より簡単に書くとエクセルですね。あれをtableタグで作成可能というわけです。

その時に1つの基準となるのが横軸の行なんですが、縦軸はありません。横軸の行だけをtrで定義すればOKです。

実際のtrタグの書き方を見ていきます。tableの中でのみ使うので、実際にはtableも一緒に書きます。

<table>

<tr><td>A</td><td>B</td></tr>

</table>

このように書いた場合は「1行の中に2つのデータセル」という書き方になります。実際にブラウザで処理を行うと以下のようになります。(実際にはCSSが色々と付与されている状態なので色とかは異なります。)

trタグがある行はそれだけで1つの行として扱うため、2行目以降を作成するには同じようにtrをたくさん書いていきます。

以下は3行の表を作成するソースコードです。

<table>
<tr><td>1</td><td>A</td></tr>
<tr><td>2</td><td>B</td></tr>
<tr><td>3</td><td>C</td></tr>
</table>

これを実行すると以下のような表が出来上がります。

ここまでのソースコードをみると、trタグの中にtdタグがありますね。tdタグは「テーブルのデータを入力するセル」です。そしてtrの中に入れることで使うことができます。

なので1行に複数のデータセルを使用する場合はその分だけtdタグを付け足していけばOKとなります。以下は「1行に5つのデータセルを持つ表」のソースコードです。

<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>

見た目はこのようになります。詳しいことはtdタグのところで書いています。

trタグは固有の属性は無く、グローバル属性とイベント属性をどちらもサポートしています。

簡単なものだと「文字を全て中央に配置する」はtrタグに記載すれば、その行すべてに適用されます。

<table>
<tr style="text-align:center;"><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

これを実行すると

1	2
3	4

このように、テキストの中央配置を指定した1行目だけ、データセルのそれぞれの中央に配置されています。しかし何も設定していない2行目に関してはデフォルトの左端によった表示になっています。

trタグはtableタグと一緒に使用し、行を定義する機能を持っています。その中にはthタグやtdタグなど、データを内包するタグを1つ以上配置します。