tableのセルを結合する際にcolspanとrowspanで、どちらか分からなくなる事がよくあります。
横方向(水平方向)ではcolspan、縦方向(垂直方向)ではrowspanを使用します。共にtdタグ、thタグで使用可能です。
colspan(横方向)の使い方
tableのセルを横方向に結合させるにはcolspanを使用します。
colspan=”2″というように連結させる数を指定します。
colspanは右方向に連結されるので、結合される分のセルを間違って記述しないよう気を付けて下さい。
<table>
<tr>
<td colspan="2">セル1</td>
<!--
この部分を消す事でセルの数を調整
<td>セル2</td>
-->
<td>セル3</td>
</tr>
<tr>
<td>セル4</td>
<td>セル5</td>
<td>セル6</td>
</tr>
</table>| セル1 | セル3 | |
| セル4 | セル5 | セル6 |
roespan(縦方向)の使い方
tableのセルを縦方向に結合させるにはrowspanを使用します。
先程と同じようにrowspan=”2″というように連結させる数を指定します。
rowspanは下方向に連結されるので、結合される分のセルを間違って記述しないよう気を付けて下さい。
<table>
<tr>
<td rowspan="2">セル1</td>
<td>セル2</td>
<td>セル3</td>
</tr>
<tr>
<!--
この部分を消す事でセルの数を調整
<td>セル4</td>
-->
<td>セル5</td>
<td>セル6</td>
</tr>
</table>| セル1 | セル2 | セル3 |
| セル5 | セル6 |
colspan、rowspanの両方を使用した作成例
最後にcolspanとrowspanを同時に使用し、縦横同時に連結させてみます。
セルの数の間違いに注意してください。
<table>
<tr>
<td colspan="2" rowspan="2">セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
</tr>
<tr>
<td>セル4</td>
<td>セル5</td>
<td>セル6</td>
</tr>
</table>| セル1 | セル2 | |
| セル3 | ||
| セル4 | セル5 | セル6 |
さいごに
いかがでしたでしょうか。
複雑なtableを組む際には、colspanとrowspanが必須となります。自在に組めるように練習しましょう。
