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

Loading

スポンサードリンク

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

セルを横に結合する

colspan="数値"

セルA セルB
セルC セルD

セルAB
セルC セルD
<!-- 結合前のタグ -->
<table border="1">
<tr>
<td>セルA</td>
<td>セルB</td>
</tr>
<tr>
<td>セルC</td>
<td>セルD</td>
</tr>
</table>
<!-- セルA・Bを結合 -->
<table border="1">
<tr>
<td colspan="2">セルAB</td>
</tr>
<tr>
<td>セルC</td>
<td>セルD</td>
</tr>
</table>

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

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

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

セルA セルB セルC セルD セルE
セルF セルG セルH セルI セルJ

セルABCDE
セルF セルG セルH セルI セルJ
<!-- 結合前のタグ -->
<table border="1">
<tr>
<td>セルA</td>
<td>セルB</td>
<td>セルC</td>
<td>セルD</td>
<td>セルE</td>
</tr>
<tr>
<td>セルF</td>
<td>セルG</td>
<td>セルH</td>
<td>セルI</td>
<td>セルJ</td>
</tr>
</table>
<!-- セルA~Eを結合 -->
<table border="1">
<tr>
<td colspan="5">セルABCDE</td>
</tr>
<tr>
<td>セルF</td>
<td>セルG</td>
<td>セルH</td>
<td>セルI</td>
<td>セルJ</td>
</tr>
</table>

こんな場合は

セルA セルB セルC セルD セルE
セルF セルG セルH セルI セルJ

セルABCDE
セルF セルG セルH セルI・セルJ
<!-- 結合前のタグ -->
<table border="1">
<tr>
<td>セルA</td>
<td>セルB</td>
<td>セルC</td>
<td>セルD</td>
<td>セルE</td>
</tr>
<tr>
<td>セルF</td>
<td>セルG</td>
<td>セルH</td>
<td>セルI</td>
<td>セルJ</td>
</tr>
</table>
<!-- セルA~EとセルIとJを結合 -->
<table border="1">
<tr>
<td colspan="5">セルABCDE</td>
</tr>
<tr>
<td>セルF</td>
<td>セルG</td>
<td>セルH</td>
<td colspan="2">セルI・セルJ</td>
</tr>
</table>

セルを縦に結合する

rowspan="数値"

セルA セルB
セルC セルD

セルAC セルB
セルD
<!-- 結合前のタグ -->
<table border="1">
<tr>
<td>セルA</td>
<td>セルB</td>
</tr>
<tr>
<td>セルC</td>
<td>セルD</td>
</tr>
</table>
<!-- セルA・Cを結合 -->
<table border="1">
<tr>
<td rowspan="2">セルAC</td>
<td>セルB</td>
</tr>
<tr>
<td>セルD</td>
</tr>
</table>

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

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

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

セルA セルB
セルC セルD
セルE セルF
セルG セルH
セルI セルJ

セルACEGI セルB
セルD
セルF
セルH
セルJ
<!-- 結合前のタグ -->
<table border="1">
<tr>
<td>セルA</td>
<td>セルB</td>
</tr>
<tr>
<td>セルC</td>
<td>セルD</td>
</tr>
<tr>
<td>セルE</td>
<td>セルF</td>
</tr>
<tr>
<td>セルG</td>
<td>セルH</td>
</tr>
<tr>
<td>セルI</td>
<td>セルJ</td>
</tr>
</table>
<!-- セルA・C・E・G・Iを結合 -->
<table border="1">
<tr>
<td rowspan="5">セルACEGI</td>
<td>セルB</td>
</tr>
<tr>
<td>セルD</td>
</tr>
<tr>
<td>セルF</td>
</tr>
<tr>
<td>セルH</td>
</tr>
<tr>
<td>セルJ</td>
</tr>
</table>

タグ見本

こんな場合は

セルA セルB
セルC セルD
セルE セルF
セルG セルH
セルI セルJ

セルAC セルB
セルD
セルE セルF
セルG セルHJ
セルI
<!-- 結合前のタグ -->
<table border="1">
<tr>
<td>セルA</td>
<td>セルB</td>
</tr>
<tr>
<td>セルC</td>
<td>セルD</td>
</tr>
<tr>
<td>セルE</td>
<td>セルF</td>
</tr>
<tr>
<td>セルG</td>
<td>セルH</td>
</tr>
<tr>
<td>セルI</td>
<td>セルJ</td>
</tr>
</table>
<!-- セルA・CとセルH・Jを結合 -->
<table border="1">
<tr>
<td rowspan="2">セルAC</td>
<td>セルB</td>
</tr>
<tr>
<td>セルD</td>
</tr>
<tr>
<td>セルE</td>
<td>セルF</td>
</tr>
<tr>
<td>セルG</td>
<td rowspan="2">セルHJ</td>
</tr>
<tr>
<td>セルI</td>
</tr>
</table>

スポンサードリンク