セルを結合させる方法

HTMLを使用した記述方法

横方向の結合１

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td colspan=2>○</td>
<td>×</td>
</tr>
<tr>
<td>×</td>
<td>○</td>
<td>×</td>
</tr>
<tr>
<td>○</td>
<td>×</td>
<td>×</td>
</tr>
</table>
</body>
</html>

表示サンプル

○×
×○×
○××

解説

横方向にセルを結合したい場合は「colspan」にて指定します。この「colspan」に「2」を指定した場合は、セルがテーブルの列を 2 つ使用することを示します。

横方向の結合２

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td colspan=3>○</td>
</tr>
<tr>
<td>×</td>
<td>○</td>
<td>×</td>
</tr>
<tr>
<td>○</td>
<td>×</td>
<td>×</td>
</tr>
</table>
</body>
</html>

表示サンプル

○
×○×
○××

解説

同様に「colspan」に「3」を指定した場合は、セルがテーブルの列を 3 つ使用することを示します。気をつけてもらいたいのは、（当たり前なのですが）セルを結合するとセルの数が一つ減ります。３つのセルを結合した場合には、２つのセルがなくなっているということを忘れないで下さい。そうしないといびつな形のテーブルができあがってしまいます。

縦方向の結合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td colspan=3>○</td>
</tr>
<tr>
<td>×</td>
<td rowspan=2>○</td>
<td>×</td>
</tr>
<tr>
<td>×</td>
<td>×</td>
</tr>
</table>
</body>
</html>

表示サンプル

○
×○×
××

解説

縦方向にセルを結合したい場合は「rowspan」を使います。使用方法や注意事項は「colspan」と同様です。セルが減ったときのつじつまが合うようにだけ気をつけて下さい。

縦と横方向の結合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td>○</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td>×</td>
<td rowspan=2 colspan=2>○</td>
</tr>
<tr>
<td>×</td>
</tr>
</table>
</body>
</html>

表示サンプル

○××
×○
×

解説

「rowspan」と「colspan」の両方を指定することにより縦方向と横方向のセルを結合することもできます。