HTMLテーブル

Q: colspan と rowspan とは何ですか？どうやって使うのですか？

colspan はセルを水平方向に結合し（列を横断）、 rowspan はセルを垂直方向に結合します（行を横断）。例： <td colspan="2"> はこのセルが2列にまたがることを意味し、 <td rowspan="3"> は3行にまたがることを意味します。一般的なシナリオ：ヘッダーが複数の列にまたがる場合（「合計」が国語、数学、英語の列をカバーするなど）、グループタイトルが複数の行にまたがる場合。重要な注意：結合した後、結合された位置のセルを削除しないと、テーブルがずれてしまいます。

Q: <thead> 、 <tbody> 、 <tfoot> は必須ですか？

必須ではありませんが、強く推奨されます。これらはテーブル構造をセマンティックにします： <thead> はヘッダー行を囲み、 <tbody> はデータ行を囲み、 <tfoot> はサマリー行を囲みます。利点：1）ブラウザがヘッダーとデータを独立してスクロールできる；2）印刷時にヘッダーが各ページで繰り返される；3）スクリーンリーダーがテーブル構造をよりよく理解できる；4）CSSスタイル制御が容易になる。データが1行しかない場合でも、 <tbody> で囲むことをお勧めします。

テーブル（<table>）はウェブページ上で構造化データを表示します。行（<tr>）とセル（<td> / <th>）から構成され、スケジュール、価格表、データレポートなどのコンテンツに最適です。

基本的なテーブル構造

最小限のテーブルには、少なくとも <table>、行（<tr>）、データセル（<td>）が必要です。

サンプル

HTML

<table border="1" width="100%">
<tr>
<th>名前</th>
<th>年齢</th>
<th>都市</th>
</tr>
<tr>
<td>田中</td>
<td>25</td>
<td>東京</td>
</tr>
<tr>
<td>鈴木</td>
<td>30</td>
<td>大阪</td>
</tr>
</table>

▶ 試してみよう

よく使われるテーブル属性

<table> と <td> に基本属性を追加して外観を制御できます ― ただし、これらの大部分はHTML5で非推奨であり、CSSでの置き換えが推奨されます。しかし、初心者が理解しておくとテーブルのレンダリング方法を把握するのに役立ちます。

サンプル

HTML

<table border="1" width="100%">
<tr>
<th align="left">名前</th>
<th width="60%">プロフィール</th>
</tr>
<tr>
<td valign="top">田中</td>
<td>フロントエンド開発者</td>
</tr>
</table>

▶ 試してみよう

属性	目的	CSSでの代替
`border`	テーブルの枠線を設定（例：`border="1"`）	`CSS border`
`width`	テーブルまたはセルの幅	`CSS width`
`align`	水平方向の配置（left / center / right）	`CSS text-align`
`valign`	垂直方向の配置（top / middle / bottom）	`CSS vertical-align`

⚠️ 重要：上記の属性（border、width、align、valign）はHTML5で非推奨です。border="1" はブラウザがまだサポートしていますが、これは旧コードとの後方互換性のためだけです。実際のプロジェクトでは、CSSを使ってテーブルのスタイリングを制御してください ― 例えば、border、text-align、vertical-align などのプロパティです。このサイトではstyle.cssにテーブルスタイルが事前設定されているため、border="1" なしでもきれいな枠線が表示されます。

セルの結合

colspan を使って列を水平方向に結合し、rowspan を使って行を垂直方向に結合します。

サンプル

HTML

<table border="1">
<tr>
<th>名前</th>
<th colspan="2">連絡先情報</th>
</tr>
<tr>
<td rowspan="2">田中</td>
<td>メール</td>
<td>tanaka@mail.com</td>
</tr>
<tr>
<td>電話</td>
<td>03-1234-5678</td>
</tr>
</table>

▶ 試してみよう

セマンティックなテーブル構造

基本的な <table> と <tr> に加えて、HTMLはテーブルの各部分を整理するための一連のセマンティックタグを提供します。

サンプル

HTML

<table border="1">
<caption>2026年売上レポート</caption>
<thead>
<tr>
<th>四半期</th>
<th>売上</th>
<th>利益</th>
</tr>
</thead>
<tbody>
<tr><td>Q1</td><td>$100K</td><td>$20K</td></tr>
<tr><td>Q2</td><td>$120K</td><td>$25K</td></tr>
</tbody>
<tfoot>
<tr><td>合計</td><td>$220K</td><td>$45K</td></tr>
</tfoot>
</table>

▶ 試してみよう

<caption> テーブルのキャプション。デフォルトでテーブルの上に表示される
<thead> テーブルのヘッダーセクション。通常は列見出し行を含む
<tbody> テーブルの本体。データ行を含む
<tfoot> テーブルのフッターセクション。集計や統計に最適

❓ よくある質問

Q ページレイアウトにテーブルを使うことはできますか？

A 絶対にできません。レイアウトにテーブルを使うことは20年前の practicesであり、完全に時代遅れです。理由：1）テーブルレイアウトはメンテナンスが難しく、1箇所を変更するとページ全体に影響する可能性がある；2）テーブルはセマンティックなレイアウトツールではなく、検索エンジンとスクリーンリーダーがコンテンツ構造を誤解する；3）テーブルレイアウトはモバイルでひどく表示されます。テーブルはデータ表示（成績表、価格表、スケジュールなど）にのみ使用し、CSS FlexboxまたはGridでレイアウトを行います。

Q colspanとrowspanとは何ですか？どうやって使うのですか？

A colspanはセルを水平方向に結合し（列を横断）、rowspanはセルを垂直方向に結合します（行を横断）。例：<td colspan="2">はこのセルが2列にまたがることを意味し、<td rowspan="3">は3行にまたがることを意味します。一般的なシナリオ：ヘッダーが複数の列にまたがる場合（「合計」が国語、数学、英語の列をカバーするなど）、グループタイトルが複数の行にまたがる場合。重要な注意：結合した後、結合された位置のセルを削除しないと、テーブルがずれてしまいます。

Q <thead>、<tbody>、<tfoot>は必須ですか？

A 必須ではありませんが、強く推奨されます。これらはテーブル構造をセマンティックにします：<thead>はヘッダー行を囲み、<tbody>はデータ行を囲み、<tfoot>はサマリー行を囲みます。利点：1）ブラウザがヘッダーとデータを独立してスクロールできる；2）印刷時にヘッダーが各ページで繰り返される；3）スクリーンリーダーがテーブル構造をよりよく理解できる；4）CSSスタイル制御が容易になる。データが1行しかない場合でも、<tbody>で囲むことをお勧めします。

📖 まとめ

<table> はテーブルを定義。<tr> が行、<th> が見出し、<td> がデータセル
<caption> テーブルタイトル。<thead> ヘッダー。<tbody> 本体。<tfoot> フッター
colspan はセルを水平方向に結合。rowspan は垂直方向に結合
テーブルをページレイアウトに使ってはいけない（それはCSSの役割）。テーブルはデータ表示のためだけに使う

📝 練習問題

時間割： <table> を使って時間割を作成してください。見出し（月曜〜金曜）と、少なくとも4行の授業枠を含めてください。
結合練習： 結合セルを使った成績表を作成してください。見出しに「生徒名」と「科目別得点」（国語、数学、英語の列をcolspanでカバー）を含めます。