[新着] Webテンプレートを仮オープンしました
tdタグに colspan="" や rowspan="" を追加すると、セルを結合することができます。
<td colspan="3" rowspan="3">
| colspan="" | 横方向で結合するセルの数を指定します |
|---|---|
| rowspan="" | 縦方向で結合するセルの数を指定します |
※thタグにもこの指定が行えます。
■colspan(横方向の結合)を指定する場合
<table border="1">
<tr>
<td colspan="3">ホームページ作成</td>
</tr>
<tr>
<td>ディレクター</td>
<td>デザイナー</td>
<td>プログラマー</td>
</tr>
</table>
▼これをブラウザで見ると次のように表示されます
| ホームページ作成 | ||
| ディレクター | デザイナー | プログラマー |
■rowspan(縦方向の結合)を指定する場合
<table border="1">
<tr>
<td rowspan="3">ホームページ作成</td>
<td>ディレクター</td>
</tr>
<tr>
<td>デザイナー</td>
</tr>
<tr>
<td>プログラマー</td>
</tr>
</table>
▼これをブラウザで見ると次のように表示されます
| ホームページ作成 | ディレクター |
| デザイナー | |
| プログラマー |
■colspanとrowspanを同時に指定する場合
<table border="1">
<tr>
<td colspan="3" rowspan="3">9枚のセルを結合</td>
<td>1行目の4列目</td>
</tr>
<tr>
<td>2行目の4列目</td>
</tr>
<tr>
<td>3行目の4列目</td>
</tr>
<tr>
<td>4行目の1列目</td>
<td>4行目の2列目</td>
<td>4行目の3列目</td>
<td>4行目の4列目</td>
</tr>
</table>
▼これをブラウザで見ると次のように表示されます
| 9枚のセルを結合 | 1行目の4列目 | ||
| 2行目の4列目 | |||
| 3行目の4列目 | |||
| 4行目の1列目 | 4行目の2列目 | 4行目の3列目 | 4行目の4列目 |