【HTML】table のセルを結合する(縦方向・横方向)

スポンサーリンク

HTML のテーブルを作成する際に、セルを縦方向(横方向)に結合したい場合があります。 その場合は、連結したい要素(td 要素、th 要素)に「rowspan 属性」や、「colspan 属性」を指定します。

縦方向に結合したい場合は「rowspan 属性」を指定し、 横方向に結合したい場合は「colspan 属性」を指定します。

使用例


<td rowspan="2">縦方向に2つのセルを結合</td>

<td colspan="3">横方向に3つのセルを結合</td>

セル結合(縦方向・横方向)のサンプル

縦方向に結合

次のテーブルは、2列目を縦方向に結合しています。

1行1列目2列目1行3列目
2行1列目2行3列目

<table>
<tr><td>1行1列目</td><td rowspan="2">2列目</td><td>1行3列目</td></tr>
<tr><td>2行1列目</td><td>2行3列目</td></tr>
</table>

横方向に結合

次のテーブルは、2行目の1列と2列を横方向に結合しています。

1行1列目1行2列目1行3列目
2行目(1列+2列)2行3列目

<table>
<tr><td>1行1列目</td><td>1行2列目</td><td>1行3列目</td></tr>
<tr><td colspan="2">2行目(1列+2列)</td><td>2行3列目</td></tr>
</table>

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト