trタグ・とは？初心者向けに分かるHTMLの「行」を作る基本タグ共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

trタグ・とは？

trタグはHTMLの表（表データ）を作るときに使う基本のタグの一つです。テーブル構造の中で「行」を作る役割を持ちます。テーブルには行と列があり、それを組み合わせてデータを整理します。trタグは通常、tbodyの中に置かれ、各trの中にはセルを定義するやが入ります。

HTMLでは、表を正しく意味づけ、データを読みやすく整理することが大切です。trタグを正しく使うと、スクリーンリーダーなどの補助技術がデータの行を認識しやすくなります。その結果、視覚に頼らないユーザーにも情報が伝わりやすくなります。

trタグの基本的な使い方

基本的な構造は以下のとおりです。実際のコードは後ほど例として示します。

まず<table>で表を作ります。行を作るにはtrタグを使い、セルにはtd（データセル）またはth（ヘッダセル）を並べます。列の見出しはthを使い、データが入る場所にはtdを使います。

重要ポイント

trは単独で使うのではなく、tdやとセットで使います。<span>tbodyの中で行を作るのが基本です。これにより、データの構造が整理され、スタイル適用やアクセシビリティの向上につながります。

実践的なコード例

以下は、3列の簡単な表の例です。コードはそのままウェブページに貼り付けて使えます。実際の表示はブラウザで確認してください。

<th>項目

説明	例
trタグ	テーブルの「行」を作る	<tr>要素
tdタグ	行のデータセル	<td>要素
thタグ	ヘッダセル（見出しセル）	<th>要素

この表の各行は<tr>タグで囲まれており、セルは<td>または<th>で定義されます。表を作るときは、まず列の見出しを<th>で作り、データを<td>で順番に並べていきます。表の読みやすさと accessibility（アクセシビリティ）を高めるには、適切な要素を選び、適切な順序で記述することが大切です。

補足として、長い表でも読みやすくする工夫はさまざまです。例えば、見出しを一目で分かるように上手く並べることや、データの並びを論理的に整理することが重要です。以上を踏まえると、trタグはHTML表の基礎中の基礎です。