<td colspan="" rowspan=""></td>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 セクショニング・ルート
利用場所 tr要素の子要素として
内容 フロー・コンテンツ

td要素colspan=""rowspan="" を追加すると、セルを結合することができます。

  • この2つの属性は、th要素でも同じように指定することができます。

<td colspan="3" rowspan="3">セルを結合します</td>

属性
任意属性
colspan="" セルの結合 (水平方向) 数値 結合するセルの数 (1以上の整数)
rowspan="" セルの結合 (垂直方向) 数値 結合するセルの数 (0以上の整数)

セルの結合方法

水平方向に結合したい場合は、colspan属性を使用します。

次の例では、水平方向に3つのセルを結合しています。

<table border="1">
<tr>
<td colspan="3">セルの結合</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
</table>

垂直方向に結合したい場合は、rowspan属性を使用します。

次の例では、垂直方向に3つのセルを結合しています。

<table border="1">
<tr>
<td rowspan="3">セルの結合</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>

rowspan属性の値に 0 を指定すると、そのセルから行グループの終りのセルまでが結合されます。グループ化が行われていない場合は、表の終りのセルまでが結合されます。

  • この指定に対応していないブラウザもあります。

次の例では、垂直方向に3つのセルが結合されることになります。

<table border="1">
<tbody>
<tr>
<td rowspan="0">セルの結合</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</tbody>
</table>

使用例

colspan属性(水平方向の結合)を指定した例

<table border="1">
<tr>
<td colspan="3">水平方向の結合</td>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
</table>

表示例
水平方向の結合
データ1 データ2 データ3
rowspan属性(垂直方向の結合)を指定した例

<table border="1">
<tr>
<td rowspan="3">垂直方向の結合</td>
<td>データ1</td>
</tr>
<tr>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
</tr>
</table>

表示例
垂直方向の結合 データ1
データ2
データ3
rowspan属性の値に 0 を指定した例

<table border="1">
<tr>
<td rowspan="0">垂直方向の結合</td>
<td>データ1</td>
</tr>
<tr>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
</tr>
<tr>
<td>データ4</td>
</tr>
<tr>
<td>データ5</td>
</tr>
</table>

表示例
垂直方向の結合 データ1
データ2
データ3
データ4
データ5
  • 対応しているブラウザでは、最後のセルまでが結合されることになります。(未対応のブラウザでは結合されません)