[html][table]<td rowspan="2">を使って結合されたセルが互い違いに来るようなテーブルを作りたい

実現したいこと

下記画像のようなテーブルをHTMLで作成したいです。(下記画像はエクセルで作りました)

発生している問題・エラーメッセージ

td rowspan="2"を使って正しく記述しているつもりなのですが、下記画像のようになってしまいます。

どのようにすれば結合されたセルを互い違いに配置できるのでしょうか

該当のソースコード

html
1<table>
2	<tr><td>1</td><td rowspan="2">2</td></tr>
3	<tr><td rowspan="2">3</td></tr>
4	<tr><td rowspan="2">4</td></tr>
5	<tr><td rowspan="2">5</td></tr>
6	<tr><td rowspan="2">6</td></tr>
7	<tr><td rowspan="2">7</td></tr>
8	<tr><td rowspan="2">8</td></tr>
9	<tr><td>9</td></tr>
10</table>

行動規範の内容に同意します

回答3件

ベストアンサー

rowspanではみ出したセルしかないと、正しく高さが確保されません。

trにheightを設定するなどして、高さを固定してみましょう。

投稿2022/07/25 04:28

maisumakun

総合スコア146581

Mudo_Ayumu

2022/07/25 04:41

なるほど、高さを固定すればよかったんですねこっちの方がダミーも必要ないしいい感じです。ありがとうございました。

行動規範の内容に同意します

高さが確定できないからそのままでは無理ですね
ダミーで一列追加しておくのが楽です

css
1<style>
2table{border-collapse:collapse;}
3td:not(:last-child){border:1px solid black;}
4</style>
5<table>
6	<tr><td>1</td><td rowspan="2">2</td><td>&nbsp;</td></tr>
7	<tr><td rowspan="2">3</td><td>&nbsp;</td></tr>
8	<tr><td rowspan="2">4</td><td>&nbsp;</td></tr>
9	<tr><td rowspan="2">5</td><td>&nbsp;</td></tr>
10	<tr><td rowspan="2">6</td><td>&nbsp;</td></tr>
11	<tr><td rowspan="2">7</td><td>&nbsp;</td></tr>
12	<tr><td rowspan="2">8</td><td>&nbsp;</td></tr>
13	<tr><td>9</td><td>&nbsp;</td></tr>
14</table>

投稿2022/07/25 04:26

yambejp

総合スコア117726

Mudo_Ayumu

2022/07/25 04:44

投稿した直後にほぼ同じことを思いつきまして、一応理想の表にはなりました。ただダミーをCSSで見えなくしてもその分位置がずれてしまうのが少しだけ気持ち悪かったです。回答ありがとうございました。

行動規範の内容に同意します

速攻自己解決で申し訳ありませんが、一番左もしくは一番右に一切セル結合をしていない列を1列設けたらほぼ理想の表になりました。
ただしこの列は必要ないのでCSSで見えないようにすることにしました。
(display:none;で完全に消してしまうと元に戻ってしまうようなので使えませんでした)
ダミーセルは見えなくしているだけで存在しているので、その分テーブルの左側にマージンのようなものができてしまい、位置揃え等の際に注意が必要ですが、一応これで何とか運用できそうでした。
元々の記述でうまくいかないのが釈然としませんが、一応解決

こんなことせんでも普通に行けるよ!!元の記述が間違ってるだけだよ!!ってのがあればご指摘お願いします。

html
1<!DOCTYPE html>
2<html lang=ja dir="ltr">
3	<head>
4    	<meta charset="utf-8">
5    	<link rel="stylesheet" href="./css/style.css">
6
7		<style>
8		*
9		{
10			margin:0;
11			padding:0;
12		}
13		th,td
14		{
15    		border: solid 1px;
16			width: 100px;
17		} 
18		table
19		{
20			margin: 20px;
21    		border-collapse:  collapse;
22		}
23		.zero
24		{
25			width: 0;
26			visibility: hidden;
27			opacity: 0;
28			/*display: none;*/
29			border: none;
30		}
31		</style>
32
33    	<title>てーぼー</title>
34	</head>
35
36	<body>
37		<table>
38			<tr><td class="zero">0</td><td>1</td><td rowspan="2">2</td></tr>
39			<tr><td class="zero">0</td><td rowspan="2">3</td></tr>
40			<tr><td class="zero">0</td><td rowspan="2">4</td></tr>
41			<tr><td class="zero">0</td><td rowspan="2">5</td></tr>
42			<tr><td class="zero">0</td><td rowspan="2">6</td></tr>
43			<tr><td class="zero">0</td><td rowspan="2">7</td></tr>
44			<tr><td class="zero">0</td><td rowspan="2">8</td></tr>
45			<tr><td class="zero">0</td><td>9</td></tr>
46		</table>
47	</body>
48</html>