質問: html テーブルタグの使い方 1つのテーブル内に 列が3列あり、10行あるところ、 真ん中の列のみ 縦に結合しています もともとの1行の高さを 20と指定し、 単純に 結合した列のセル高さを200としています そうすると、20の高さのセル高さがおかしくなってしまいます いろいろやってみたのですが やはりうまくいきません そこで、1つのテーブル、1つのセル内に 縦にテーブルを3つ並べ、セルの結合を 回避するように考えました いわゆるホームページ作成ソフトは セルの中にセル(表)が作成できますので これと同じ感じですが そもそもこれは 邪道なものなのでしょうか? こだけ聞きたいです
回答: 固定幅で二次元配列できるグリッドレイアウトにしましょう。 https://developer.mozilla.org/ja/docs/web/css/css_grid_layout 例) 5行ずつ3列で、2列目は5行分を結合 .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; } 12345 long long long 12345