HTML テーブルのセルを縦につなげるサンプル(rowspan)

HTMLのテーブルのセルを縦につなげるサンプルです。
rowspan属性を使用します。

rowspan 属性

< td rowspan="縦につなげるセルの数" >

指定したセルの数分、セルを縦につなげます。
縦に繋がる部分のtdタグはrowspan属性のあるtdタグ以外は不要になります。

テーブルの左側のセルを縦につなぐサンプル

テーブルの左側のセルを縦につなげています。

rowspan セルを縦につなげる	赤 red
	黄 yellow
	青 blue

コード

上記サンプルのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テーブルのrowspanのサンプル</title>
</head>
<body >
<table border="1">
	<tr>
		<td rowspan="3">rowspan</td>
		<td>赤 red</td>
	</tr>
	<tr>
		<td>黄 yellow</td>
	</tr>
	<tr>
		<td>青 blue</td>
	</tr>
</table>
</body>
</html>

以下はMDNのtd要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/td

テーブルの右側のセルを縦につなぐサンプル

テーブルの右側にrowspanを作る場合のサンプルです。

赤 red	rowspan セルを縦につなげる
黄 yellow
青 blue

コード

上記サンプルのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テーブルのrowspanのサンプル</title>
</head>
<body >
<table border="1">
	<tr>
		<td>赤 red</td>
		<td rowspan="3">rowspan</td>
	</tr>
	<tr>
		<td>黄 yellow</td>
	</tr>
	<tr>
		<td>青 blue</td>
	</tr>
</table>
</body>
</html>