お知らせ / ブログINFO / BLOG
2020.06.26
【HTML】table(テーブル)のセル結合
セル結合する際に、水平方向(colspan)か垂直方向(rowspan)か、どちらか分からなくなる事がよくあります。
そんな時のための備忘録です。
HTML
<table>
<tr>
<th>商品名</th>
<th>通常価格</th>
<th>セール時価格</th>
</tr>
<tr>
<td>商品A</td>
<td rowspan="2">500円</td>
<td>400円</td>
</tr>
<tr>
<td>商品B</td>
<td>300円</td>
</tr>
<tr>
<td>商品C</td>
<td colspan="2">1000円</td>
</tr>
</table>| 商品名 | 通常価格 | セール時価格 |
|---|---|---|
| 商品A | 500円 | 400円 |
| 商品B | 300円 | |
| 商品C | 1000円 | |
複雑なtableを組む場合、colspanとrowspanが必須となりますので、自由に組めるように練習しておく必要があります。
