セルを結合する｜テーブルタグ講座

テーブルタグ｜セルを結合する｜たったこれだけタグ講座

スポンサードリンク

セルを横に結合する
セルを縦に結合する

セルを横に結合する

colspan="数値"

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

セルＡＢ
セルＣ	セルＤ

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

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

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

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

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

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

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

<!-- 結合前のタグ -->
<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>

<!-- セルＡ～Ｅを結合 -->
<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>

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

セルを縦に結合する

rowspan="数値"

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

セルＡＣ	セルＢ
	セルＤ

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

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

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

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

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

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

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

<!-- 結合前のタグ -->
<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>

<!-- セルＡ・Ｃ・Ｅ・Ｇ・Ｉを結合 -->
<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>

<!-- セルＡ・ＣとセルＨ・Ｊを結合 -->
<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>

スポンサードリンク