質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.31%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

3081閲覧

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

Mudo_Ayumu

総合スコア7

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/07/25 04:18

実現したいこと

下記画像のようなテーブルを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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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

投稿2022/07/25 04:28

maisumakun

総合スコア146544

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mudo_Ayumu

2022/07/25 04:41

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

0

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

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

総合スコア117665

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mudo_Ayumu

2022/07/25 04:44

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

0

速攻自己解決で申し訳ありませんが、一番左もしくは一番右に一切セル結合をしていない列を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>

投稿2022/07/25 04:38

Mudo_Ayumu

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問