HTMLの表タグを完全ガイド！初心者でもわかる表の使い方
新人
「HTMLで表を作りたいんですけど、どうすればいいですか？」
先輩
「HTMLでは、tableタグを使って表を作成することができます。表を作るためには、まずtableタグで表全体を囲んで、その中に行（trタグ）と列（tdタグ）を配置します。」
新人
「なるほど、表の中でどのように情報を整理すればいいのか、具体的に教えてもらえますか？」
先輩
「もちろんです！それでは、基本的な使い方を見てみましょう。」
1. 表を作成する基本の流れ
HTMLで表を作るためには、まずtableタグを使います。その中に、行を作成するためにtrタグを使い、各セル（データ）のためにtdタグを使います。ヘッダーが必要な場合は、thタグを使って、表の上部にタイトルを表示できます。
<table border="1">
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>山田太郎</td>
<td>25</td>
</tr>
<tr>
<td>鈴木一郎</td>
<td>30</td>
</tr>
</table>
上記の例では、tableタグで表全体を囲み、trタグで行を定義し、thタグで表のヘッダーを作成しています。データのセルにはtdタグを使用しています。
2. 表のデザインを整える方法
HTMLだけで表のデザインはあまり細かく設定できませんが、CSSを使うことでデザインを整えることができます。例えば、枠線を追加したり、セルの背景色を変更することができます。
<table border="1">
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>山田太郎</td>
<td>25</td>
</tr>
<tr>
<td>鈴木一郎</td>
<td>30</td>
</tr>
</table>
この例では、表の枠線にborder="1"を使っています。これにより、表に枠線が追加されます。
3. 表のセルを結合する方法
表でセルを結合する場合、colspan属性を使って列を、rowspan属性を使って行を結合することができます。これにより、複雑な表を作成できます。
<table border="1">
<tr>
<th colspan="2">名前と年齢</th>
</tr>
<tr>
<td rowspan="2">山田太郎</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
</tr>
</table>
この例では、colspanを使って「名前と年齢」というヘッダーを2列に結合し、rowspanを使って「山田太郎」というセルを2行にわたって表示しています。
4. 表のアクセシビリティ向上のために
表は情報を整理するために便利ですが、視覚に頼らずに情報を提供することも大切です。captionタグを使って、表にタイトルを追加することで、画面リーダーを使用しているユーザーにも表の内容がわかりやすくなります。
<table border="1">
<caption>社員情報</caption>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>山田太郎</td>
<td>25</td>
</tr>
</table>
captionタグを使うことで、表にタイトルを付けることができ、視覚に頼らずに情報を理解しやすくなります。
