セルとセルを横に結合する
上部
表のセルとセルは結合する事も出来るんだ。
まずは、セルとセルを横に結合する方法について説明しよう。
学
はい。お願いします。
上部
セルとセルを横に結合する場合は「colspan」を使うんだよ。
具体的な例で説明するね。
次のような３行３列の表が有るとしよう。
| １行１列目 | １行２列目 | １行３列目 |
| ２行１列目 | ２行２列目 | ２行３列目 |
| ３行１列目 | ３行２列目 | ３行３列目 |
上部
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 colspan="2">２行２列目と２行３列目</td></tr>
<tr><td>３行１列目</td><td>３行２列目</td><td>３行３列目</td></tr>
</table>
上部
実際に表示してみると次のようになるよ。
| １行１列目 | １行２列目 | １行３列目 |
| ２行１列目 | ２行２列目と２行３列目 | |
| ３行１列目 | ３行２列目 | ３行３列目 |
上部
「colspan」の値は結合するセルの数を指定するんだよ。
学
なるほど。じゃあ、例えば１行目の３つのセル全てを結合したい場合は次のように書くんですね。
<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>
上部
うん。その通り！
学
じゃあ、実際に表示してみますね。
| １行１列目と１行２列目と１行３列目 | ||
| ２行１列目 | ２行２列目 | ２行３列目 |
| ３行１列目 | ３行２列目 | ３行３列目 |
学
やった！うまくいきましたよ！
