プロが教える店舗&オフィスのセキュリティ対策術

1つのテーブル内に 列が3列あり、10行あるところ、
真ん中の列のみ 縦に結合しています
もともとの1行の高さを 20と指定し、
単純に 結合した列のセル高さを200としています
そうすると、20の高さのセル高さがおかしくなってしまいます
いろいろやってみたのですが やはりうまくいきません
そこで、1つのテーブル、1つのセル内に 縦にテーブルを3つ並べ、セルの結合を
回避するように考えました

いわゆるホームページ作成ソフトは セルの中にセル(表)が作成できますので
これと同じ感じですが

そもそもこれは 邪道なものなのでしょうか?

こだけ聞きたいです

gooドクター

A 回答 (3件)

要するに<td></td>の中に<table>タグを放り込んでいいのか?というお尋ねでしょうか?



こういう構造ってことですよね?

┏━━━━━━━┓
┃テーブル   ┃
┃┏━┳━┳━┓┃
┃┃テ┃テ┃テ┃┃
┃┃ー┃ー┃ー┃┃
┃┃ブ┃ブ┃ブ┃┃
┃┃ル┃ル┃ル┃┃
┃┗━┻━┻━┛┃
┗━━━━━━━┛

html5のルールでは問題ないです。
テーブルの入れ子といわれるものですね。
下記をご覧いただければ。

https://webliker.info/46840/#toc_12

重要なのは<td></td>の中に入れることです。
    • good
    • 0
この回答へのお礼

まさにそのとおりです!
tableのネストコードは
あまり見たことが無かったので 何か問題があるのか?
と思った次第です


ありがとうございます

お礼日時:2021/03/26 23:10

固定幅で二次元配列できるグリッドレイアウトにしましょう。


https://developer.mozilla.org/ja/docs/Web/CSS/CS …

例) 5行ずつ3列で、2列目は5行分を結合
<style>
.grid-r5 { display:grid; grid: repeat(5, 20px) / auto-flow 100px; }
.grid-r5 > p { margin:0; }
.grid-r5 > p:nth-child(2n) { background:lightgray; }
.grid-r5 > p.row-span { grid-row:1/6; }
</style>
<div class=grid-r5>
<p>1<p>2<p>3<p>4<p>5 <!-- 1列 -->
<p class=row-span>long<br>long<br>long <!-- 2列 -->
<p>1<p>2<p>3<p>4<p>5 <!-- 3列 -->
</div>
    • good
    • 0
この回答へのお礼

いや そういう事を聞いているわけでは無いのですが・・

お礼日時:2021/03/26 21:34

tableは表なので、MS Excelのような表と同じだと思ってください。


Excelのセルに表なんて入れませんよね・・・


完成希望図が無いので、何をしたいのか、よくわからないけど、
真ん中の列は、
10行だと、<td rowspan="10"> にすると、縦列が融合して空欄になるので、
そこのセルに、テーブルではなく、何らかのコンテンツを3つ並べれば良いのではないでしょうか。
    • good
    • 0
この回答へのお礼

連結方法を質問しているわけではありません
連結すると 隣のセルが高さを固定していても
変化してしまい困っているのですが、
テーブルを複数使う事で解決していますが
それは邪道なのか? という質問です

お礼日時:2021/03/26 18:20

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング