2026年4月16日
HTML テーブル colspan・rowspan とは？
基本的なHTMLテーブルを覚えたら、次は応用です。colspan（コルスパン）と rowspan（ロウスパン）を使うと、複数のセルを結合して複雑な表が作れます。
colspan="数"：横方向に結合（列をまたぐ）rowspan="数"：縦方向に結合（行をまたぐ）
colspanで横に結合する
<table>
<tr>
<th colspan="3">2026年度 成績表</th>
</tr>
<tr>
<th>教科</th>
<th>前期</th>
<th>後期</th>
</tr>
<tr>
<td>数学</td>
<td>85点</td>
<td>90点</td>
</tr>
</table>colspan="3" を指定したセルは、3列分の幅を占めます。
📖 詳しくはheadタグに書くべき内容で解説しています。
rowspanで縦に結合する
<table>
<tr>
<th rowspan="2">前期</th>
<td>4月</td>
<td>入学式</td>
</tr>
<tr>
<td>5月</td>
<td>体育祭</td>
</tr>
</table>rowspan="2" を指定したセルは、2行分の高さを占めます。結合した分のセルは次の行から省略します。
👉 HTML練習問題10選も参考にしてください。
captionでテーブルにタイトルをつける
<caption> タグを使うと、テーブルにタイトルをつけられます。アクセシビリティとSEOに効果的です。
<table>
<caption>2026年度 時間割</caption>
<tr>
<th>月</th>
<th>火</th>
<th>水</th>
</tr>
<!-- ... -->
</table>scope属性でアクセシビリティを高める
scope 属性を <th> に追加すると、スクリーンリーダーがどの行・列のヘッダーかを正しく認識できます。
<tr>
<th scope="col">名前</th> <!-- 列のヘッダー -->
<th scope="col">点数</th>
</tr>
<tr>
<th scope="row">田中</th> <!-- 行のヘッダー -->
<td>85点</td>
</tr>🔥 classとidの違いで実践してみましょう。
まとめ
- ✅ colspan：横方向にセルを結合する
- ✅ rowspan：縦方向にセルを結合する
- ✅ caption：テーブルにタイトルをつける
- ✅ scope：ヘッダーの対象を明示してアクセシビリティを高める
テーブルの応用を覚えると、複雑なデータも整理して表示できます。レッスンでさらに詳しく学んでみましょう。