添付画像のような画面を作成するCSSとHTMLを教えてください

私はCSSのスキルがないので添付画像のような画面はテーブルを入れ子にして
作成する古いテーブルレイアウトの方法しかわかりません
今のトレンドがわからないので現在のトレンドのCSSとHTMLを教えてください

No.2 回答者： gura_ 回答日時： 2021/07/31 13:47

39OKさん

････古いテーブルレイアウトの方法しかわかりません･････

そのページが tableで出来ているなら、そのまま使うのがベストでしょう。
ただし、tableには色々制限が加わっているのでそのことは頭に入れていたら良いでしょう。

ご参考に↓
https://www.tohoho-web.com/html/table.htm
https://developer.mozilla.org/ja/docs/Web/CSS/ta …

No.1 回答者： Ogre7077 回答日時： 2021/07/30 18:57

昨今の CSS レイアウトの概略ならば、以下でざっくりと読めます

https://developer.mozilla.org/ja/docs/Learn/CSS/ …

ご提示の画面を実現するならば、以下の案で如何でしょうか

* グリッド(grid)レイアウトで 2 列 3 行の枠を作る
* 枠の間には適当な溝(gap)を入れて間隔を開ける
* 1 列 2 行 と 1 列 3 行の枠は結合(span)する
* 各枠に <table> の表を入れる

スマートフォン対応を考えるならば追加で

* 表は <table> ではなく <dl> にする
* <dl> はグリッド等のレイアウトを使い 2 列 n 行の表に見せる
* 横に狭い画面なら、全体の枠を 1 列 6 行に変える (スマホ横持ち)
* 更に狭い画面なら、個別の表を 1 列 n 行に変える (スマホ縦持ち)

参考)
グリッドの枠を決める
https://developer.mozilla.org/ja/docs/Web/CSS/gr …
枠の間に溝を入れる
https://developer.mozilla.org/ja/docs/Web/CSS/gap
上下の枠を結合する
https://developer.mozilla.org/ja/docs/Web/CSS/gr …
横に狭い画面を検知する
https://developer.mozilla.org/ja/docs/Learn/CSS/ …