テーブルのセルを結合する

テーブルの中のセルは一つに結合することができます。

<td colspan="数字">で横方向のセルを結合することができます。

【ブラウザ表示】

セル1

セル2

↑本来は1行×2列のテーブル

1行目のセルが横に結合

ソース

<table border="1">
<tr>
<td colspan="2">1行目のセルが横に結合</td>……1列目と2列目のセルが結合。
</tr>
</table>

<td rowspan="数字">で縦方向のセルを結合させることができます。

【ブラウザ表示】

セル1	セル2
セル3	セル4

↑本来は2行×2列のテーブル

1列目のセルが縦に結合	セル2
	セル4

ソース

<table border="1">
<tr>
<td rowspan="2">1列目のセルが縦に結合 </td>……1列目のセル1とセル3が縦方向に結合。
<td>セル2</td>
</tr>
<tr>
<td>セル4</td>
</tr>
</table>

縦と横両方のセルを結合するとエクセルの表のようなテーブルにすることもできます。

【ブラウザ表示】

↑本来は3行×2列のテーブル

ソース

<table border="1">
<tr>
<td colspan="2">1行目のセルが横に結合</td>
</tr>
<tr>
<td rowspan="2">縦に結合</td><td>セル4</td>
</tr>
<tr>
<td>セル6</td>
</tr>
</table>

HTMLタグ一覧のページに戻る