現在地: Home » 初級ホームページ作成講座：目次 » セルを結合する

セルを結合する

  1. セルを横に結合する
  2. セルを縦に結合する

セルを横に結合する

colspan="数値"

セルＡ セルＢ
セルＣ セルＤ

セルＡＢ
セルＣ セルＤ 
セルＡ・Ｂを結合
<table border="1">
<tr>
<td colspan="2">セルＡＢ</td>
</tr>
<tr>
<td>セルＣ</td>
<td>セルＤ</td>
</tr>
</table>

結合前のタグ
<table border="1">
<tr>
<td>セルＡ</td>
<td>セルＢ</td>
</tr>
<tr>
<td>セルＣ</td>
<td>セルＤ</td>
</tr>
</table>

セルを横方向（行）に結合する場合はcolspan="数値"で指定します。

"数値"とは「結合したいセルの数」=「結合したい行数」と覚えるといいかも知れませんね。

▲Top

セルを横に結合する(複数のセル)

セルＡ セルＢ セルＣ セルＤ セルＥ
セルＦ セルＧ セルＨ セルＩ セルＪ

セルＡＢＣＤＥ
セルＦ セルＧ セルＨ セルＩ セルＪ 
セルＡ〜Ｅを結合
<table border="1">
<tr>
<td colspan="5">セルＡＢＣＤＥ</td>
</tr>
<tr>
<td>セルＦ</td>
<td>セルＧ</td>
<td>セルＨ</td>
<td>セルＩ</td>
<td>セルＪ</td>
</tr>
</table>

結合前のタグ
<table border="1">
<tr>
<td>セルＡ</td>
<td>セルＢ</td>
<td>セルＣ</td>
<td>セルＤ</td>
<td>セルＥ</td>
</tr>
<tr>
<td>セルＦ</td>
<td>セルＧ</td>
<td>セルＨ</td>
<td>セルＩ</td>
<td>セルＪ</td>
</tr>
</table>

▲Top

こんな場合は

セルＡ セルＢ セルＣ セルＤ セルＥ
セルＦ セルＧ セルＨ セルＩ セルＪ

セルＡＢＣＤＥ
セルＦ セルＧ セルＨ セルＩ・セルＪ 
セルＡ〜ＥとセルＩとＪを結合
<table border="1">
<tr>
<td colspan="5">セルＡＢＣＤＥ</td>
</tr>
<tr>
<td>セルＦ</td>
<td>セルＧ</td>
<td>セルＨ</td>
<td colspan="2">セルＩ・セルＪ</td>
</tr>
</table>

結合前のタグ
<table border="1">
<tr>
<td>セルＡ</td>
<td>セルＢ</td>
<td>セルＣ</td>
<td>セルＤ</td>
<td>セルＥ</td>
</tr>
<tr>
<td>セルＦ</td>
<td>セルＧ</td>
<td>セルＨ</td>
<td>セルＩ</td>
<td>セルＪ</td>
</tr>
</table>

▲Top

セルを縦に結合する

rowspan="数値"

セルＡ セルＢ
セルＣ セルＤ

セルＡＣ セルＢ
セルＤ 
セルＡ・Ｃを結合
<table border="1">
<tr>
<td rowspan="2">セルＡＣ</td>
<td>セルＢ</td>
</tr>
<tr>
<td>セルＤ</td>
</tr>
</table>

結合前のタグ
<table border="1">
<tr>
<td>セルＡ</td>
<td>セルＢ</td>
</tr>
<tr>
<td>セルＣ</td>
<td>セルＤ</td>
</tr>
</table>

セルを横方向（行）に結合する場合はrowspan="数値"で指定します。

"数値"とは「結合したいセルの数」=「結合したい列数」と覚えるといいかも知れませんね。

▲Top

セルを縦に結合する(複数のセル)

セルＡ セルＢ
セルＣ セルＤ
セルＥ セルＦ
セルＧ セルＨ
セルＩ セルＪ

セルＡＣＥＧＩ セルＢ
セルＤ
セルＦ
セルＨ
セルＪ 
セルＡ・Ｃ・Ｅ・Ｇ・Ｉを結合
<table border="1">
<tr>
<td rowspan="5">セルＡＣＥＧＩ</td>
<td>セルＢ</td>
</tr>
<tr>
<td>セルＤ</td>
</tr>
<tr>
<td>セルＦ</td>
</tr>
<tr>
<td>セルＨ</td>
</tr>
<tr>
<td>セルＪ</td>
</tr>
</table>

結合前のタグ
<table border="1">
<tr>
<td>セルＡ</td>
<td>セルＢ</td>
</tr>
<tr>
<td>セルＣ</td>
<td>セルＤ</td>
</tr>
<tr>
<td>セルＥ</td>
<td>セルＦ</td>
</tr>
<tr>
<td>セルＧ</td>
<td>セルＨ</td>
</tr>
<tr>
<td>セルＩ</td>
<td>セルＪ</td>
</tr>
</table>

▲Top

タグ見本

こんな場合は

セルＡ セルＢ
セルＣ セルＤ
セルＥ セルＦ
セルＧ セルＨ
セルＩ セルＪ

セルＡＣ セルＢ
セルＤ
セルＥ セルＦ
セルＧ セルＨＪ
セルＩ 
セルＡ・ＣとセルＨ・Ｊを結合
<table border="1">
<tr>
<td rowspan="2">セルＡＣ</td>
<td>セルＢ</td>
</tr>
<tr>
<td>セルＤ</td>
</tr>
<tr>
<td>セルＥ</td>
<td>セルＦ</td>
</tr>
<tr>
<td>セルＧ</td>
<td rowspan="2">セルＨＪ</td>
</tr>
<tr>
<td>セルＩ</td>
</tr>
</table>

結合前のタグ
<table border="1">
<tr>
<td>セルＡ</td>
<td>セルＢ</td>
</tr>
<tr>
<td>セルＣ</td>
<td>セルＤ</td>
</tr>
<tr>
<td>セルＥ</td>
<td>セルＦ</td>
</tr>
<tr>
<td>セルＧ</td>
<td>セルＨ</td>
</tr>
<tr>
<td>セルＩ</td>
<td>セルＪ</td>
</tr>
</table>

▲Top

高性能サーバ

低価格サーバ

無料ホームページスペース