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>

関連の記事

HTML テーブルのセルを横につなげるサンプル(colspan)
HTML テーブルのセル内の余白を指定するサンプル(cellpadding)
HTML テーブルのセルの間隔を指定するサンプル(cellspacing)
HTML テーブルの幅を指定するサンプル(width)
HTML リストを作成するサンプル(ul/li/ol)




△上に戻る