セルとセルを縦に結合する
上部
次は、セルとセルを縦に結合する方法について説明しよう。
学
はい。お願いします。
上部
セルとセルを縦に結合する場合は「rowspan」を使うんだよ。
具体的な例で説明するね。
さっきと同じように、次のような３行３列の表が有るとしよう。
| １行１列目 | １行２列目 | １行３列目 |
| ２行１列目 | ２行２列目 | ２行３列目 |
| ３行１列目 | ３行２列目 | ３行３列目 |
上部
HTMLは次のようになるよね。
<table border="1" cellspacing="0" cellpadding="3">
<tr><td>１行１列目</td><td>１行２列目</td><td>１行３列目</td></tr>
<tr><td>２行１列目</td><td>２行２列目</td><td>２行３列目</td></tr>
<tr><td>３行１列目</td><td>３行２列目</td><td>３行３列目</td></tr>
</table>
上部
例えば、この表の「２行２列目」と「３行２列目」を縦に結合したい場合は、HTMLを次のように変更しよう。
<table border="1" cellspacing="0" cellpadding="3">
<tr><td>１行１列目</td><td>１行２列目</td><td>１行３列目</td></tr>
<tr><td>２行１列目</td><td rowspan="2">２行２列目と３行２列目</td><td>２行３列目</td></tr>
<tr><td>３行１列目</td><td>３行３列目</td></tr>
</table>
上部
実際に表示してみると次のようになるよ。
| １行１列目 | １行２列目 | １行３列目 |
| ２行１列目 | ２行２列目と３行２列目 | ２行３列目 |
| ３行１列目 | ３行３列目 |
上部
３行２列目の<td>〜</td>が無くなっているのがポイントだよ。
「rowspan」の値は結合するセルの数を指定するんだよ。
学
なるほど。じゃあ、例えば１３列目の縦３つのセル全てを結合したい場合は次のように書くんですね。
<table border="1" cellspacing="0" cellpadding="3">
<tr><td colspan="3">１行１列目と１行２列目と１行３列目</td></tr>
<tr><td>２行１列目</td><td>２行２列目</td><td>２行３列目</td></tr>
<tr><td>３行１列目</td><td>３行２列目</td><td>３行３列目</td></tr>
</table>
上部
うん。その通り！
学
じゃあ、実際に表示してみますね。
| １行１列目と２行１列目と３行３列目 | １行２列目 | ３行３列目 |
| ２行２列目 | ２行３列目 | |
| ３行２列目 | ３行３列目 |
学
やった！うまくいきましたよ！
