```html
HTML テーブル: 行の作成
HTML でテーブルを作成する際、<table>
タグでテーブル全体を定義しますが、行を作成するには <tr>
タグを使用します。
<tr>
要素とは
<tr>
は、"table row" (テーブルの行) の略で、テーブル内の1つの行を表す要素です。 <table>
要素の子要素として使用し、その中にヘッダーセル (<th>
) またはデータセル (<td>
) を配置することで、行の内容を定義します。
<tr>
要素の使い方
基本的な構文は以下の通りです。
<table>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
このコードは、以下のような2行2列のテーブルを作成します。
ヘッダー1 | ヘッダー2 |
---|---|
データ1 | データ2 |
複数行の作成
複数の行を作成するには、<tr>
要素を必要な数だけ記述します。例えば、3行のテーブルを作成する場合は、以下のように記述します。
<table>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>
まとめ
<tr>
要素は、HTML テーブルの行を作成するために必須の要素です。 <th>
要素と <td>
要素を組み合わせて使用することで、様々な形式のテーブルを作成することができます。
関連QA
-
Q:
<tr>
要素の中に、<th>
要素と<td>
要素を混在させることはできますか?A: はい、可能です。ただし、セルの意味合いがわかりにくくなる可能性があるので、ヘッダー行には
<th>
要素のみ、データ行には<td>
要素のみを使用するのが一般的です。 -
Q:
<tr>
要素の中に、何も要素を記述しないとどうなりますか?A: 空の行が作成されます。ただし、ブラウザによっては表示されない場合があります。
-
Q:
<tr>
要素は、他の要素の中にネストできますか?A: いいえ、
<tr>
要素は、<table>
要素の直下のみに配置することができます。
```