ブログ投稿日時：
ブログ更新日時：
tableタグで使用するcolspanとrowspanについて解説
1.
colspan とは
colspan とは、tableタグのセルに対して水平方向の結合を指定するプロパティです。
colspan を指定するときはCSSにスタイルを書くのではなく、HTMLタグに直接書くので注意が必要です。
2.
colspan の指定方法
それでは、colspan を使用して水平方向のセルを結合するときの指定方法と表示を見ていきましょう。
<table>
<tr>
<th colspan="3">タイトル01</th>
</tr>
<tr>
<td colspan="3">データ01</td>
</tr>
<tr>
<td>データ02</td>
<td>データ03</td>
<td>データ04</td>
</tr>
</table>table {
border-collapse: collapse;
}
th,
td {
font-size: 16px;
border: 1px solid #000;
padding: 12px 16px;
}HTMLの表示
| タイトル01 | ||
|---|---|---|
| データ01 | ||
| データ03 | データ03 | データ04 |
上記のように colspan を使用すると水平方向のセルを結合することができました。
また、colspan はthタグとtdタグに使用することができます。
3.
rowspan とは
rowspan とは、tableタグのセルに対して垂直方向の結合を指定するプロパティです。
rowspan を指定するときもCSSにスタイルを書くのではなく、HTMLタグに直接書くので注意が必要です。
4.
rowspan の指定方法
それでは、rowspan を使用して垂直方向のセルを結合するときの指定方法と表示を見ていきましょう。
<table>
<tr>
<th rowspan="3">タイトル01</th>
<td>データ01</td>
</tr>
<tr>
<td>データ02</td>
</tr>
<tr>
<td>データ03</td>
</tr>
<tr>
<td rowspan="3">タイトル02</th>
<td>データ04</td>
</tr>
<tr>
<td>データ05</td>
</tr>
<tr>
<td>データ06</td>
</tr>
</table>table {
border-collapse: collapse;
}
th,
td {
font-size: 16px;
border: 1px solid #000;
padding: 12px 16px;
}HTMLの表示
| タイトル01 | データ01 |
|---|---|
| データ02 | |
| データ03 | |
| タイトル02 | データ04 |
| データ05 | |
| データ06 |
上記のように rowspan を使用すると垂直方向のセルを結合することができました。
また、rowspan もthタグとtdタグに使用することができます。
5.
今回のまとめ
この記事では colspan と rowspan について解説しました。
colspan とは、tableタグのセルに対して水平方向の結合を指定するプロパティです。
rowspan とは、tableタグのセルに対して垂直方向の結合を指定するプロパティです。
colspan と rowspan を指定するときはCSSにスタイルを書くのではなく、HTMLタグに直接書くので注意が必要です。
最後までお読みいただきありがとうございました。