HTMLで表を作成するタグ
HTMLで表を作成するには、主に4つのタグを使用します。これらのタグを組み合わせて、行、列、ヘッダーなどを定義し、表構造を作っていきます。以下に、それぞれのタグとその役割、使用方法を具体例を交えて解説していきます。
主要な表タグ
<table>: 表全体の範囲を定義するタグです。このタグで囲まれた部分が表として認識されます。<tr>: 表の行（横方向の並び）を定義するタグです。表は複数の行で構成されます。<th>: 表のヘッダーセルを定義するタグです。ヘッダーセルは、通常、行や列の見出しとして使用され、太字で表示されます。<td>: 表のデータセルを定義するタグです。データセルには、テキスト、画像、リンクなど、様々なコンテンツを入れることができます。
タグの使い方と例
これらのタグを使って、実際に簡単な表を作成してみましょう。例えば、以下のような表を作成する場合を考えてみます。
| 名前 | 年齢 | 出身地 |
|---|---|---|
| 田中太郎 | 30 | 東京都 |
| 佐藤花子 | 25 | 大阪府 |
この表を作成するためのHTMLコードは以下のようになります。
<table>
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
</thead>
<tbody>
<tr>
<td>田中太郎</td>
<td>30</td>
<td>東京都</td>
</tr>
<tr>
<td>佐藤花子</td>
<td>25</td>
<td>大阪府</td>
</tr>
</tbody>
</table>
上記のように、<table>タグで表全体を囲み、その中に<tr>タグで各行を定義します。ヘッダー行は<thead>タグで囲み、<th>タグでヘッダーセルを作成します。データ行は<tbody>タグで囲み、<td>タグでデータセルを作成します。
関連Q&A
-
Q: 表のセルを結合することはできますか？
A: はい、
<td>タグと<th>タグでは、colspan属性で横方向に、rowspan属性で縦方向にセルを結合することができます。 -
Q: 表に罫線を付けるにはどうすればいいですか？
A: 以前はborder属性を使用していましたが、現在はCSSで装飾することが推奨されています。
<table>タグ、<td>タグ、<th>タグなどにスタイルを適用することで罫線を自由に変更できます。 -
Q: 表の幅や高さはどうやって指定しますか？
A: こちらもCSSで指定することが推奨されています。widthプロパティで幅を、heightプロパティで高さを指定します。pxや%などの単位を使って指定することができます。