table要素で組んだ表とCSSグリッドレイアウトで組んだ「表」の比較。

表1table要素で組んだ表。行見出し(th要素)がとどまる。
提唱者 第一部 第二部 第三部 第四部
藤岡作太郎 正編前紀
桐壺から朝顔
正編中紀
少女から藤裏葉
正編後紀
若菜から竹河
続編
橋姫から夢浮橋
久松潜一
実方清
第一期
桐壺から明石
第二期
澪標から藤裏葉
第三期
若菜から幻
第四期
匂宮から夢浮橋
重松信弘 正編青年期
桐壺から明石
正編中年期
澪標から藤裏葉
正編晩年期
若菜から竹河
続編
匂宮から夢浮橋
森岡常夫 第一期
桐壺から朝顔
第二期
少女から藤裏葉
第三期
若菜から幻
第四期
匂宮から夢浮橋
大野晋 a系
第一部(紫上系)
b系
第一部(玉鬘系)
c系=第二部
若菜から幻
d系=第三部
匂宮から夢浮橋
表2画面の高さ(height)に応じて列数が変わる。セルが文字のように次の行に流れ出す。
提唱者 第一部 第二部 第三部 第四部
藤岡作太郎 正編前紀
桐壺から朝顔
正編中紀
少女から藤裏葉
正編後紀
若菜から竹河
続編
橋姫から夢浮橋
久松潜一
実方清
第一期
桐壺から明石
第二期
澪標から藤裏葉
第三期
若菜から幻
第四期
匂宮から夢浮橋
重松信弘 正編青年期
桐壺から明石
正編中年期
澪標から藤裏葉
正編晩年期
若菜から竹河
続編
匂宮から夢浮橋
森岡常夫 第一期
桐壺から朝顔
第二期
少女から藤裏葉
第三期
若菜から幻
第四期
匂宮から夢浮橋
大野晋 a系
第一部(紫上系)
b系
第一部(玉鬘系)
c系=第二部
若菜から幻
d系=第三部
匂宮から夢浮橋
表3div要素で構成し、CSSでtableとして組んだ表。
提唱者
第一部
第二部
第三部
第四部
藤岡作太郎
正編前紀
桐壺から朝顔
正編中紀
少女から藤裏葉
正編後紀
若菜から竹河
続編
橋姫から夢浮橋
久松潜一
実方清
第一期
桐壺から明石
第二期
澪標から藤裏葉
第三期
若菜から幻
第四期
匂宮から夢浮橋
重松信弘
正編青年期
桐壺から明石
正編中年期
澪標から藤裏葉
正編晩年期
若菜から竹河
続編
匂宮から夢浮橋
森岡常夫
第一期
桐壺から朝顔
第二期
少女から藤裏葉
第三期
若菜から幻
第四期
匂宮から夢浮橋
大野晋
a系
第一部(紫上系)
b系
第一部(玉鬘系)
c系=第二部
若菜から幻
d系=第三部
匂宮から夢浮橋
表4div要素で構成し、CSSでtableとして組んだ表。画面の高さ(height)に応じて列数が変わる。セルが文字のように次の行に流れ出す。
提唱者
第一部
第二部
第三部
第四部
藤岡作太郎
正編前紀
桐壺から朝顔
正編中紀
少女から藤裏葉
正編後紀
若菜から竹河
続編
橋姫から夢浮橋
久松潜一
実方清
第一期
桐壺から明石
第二期
澪標から藤裏葉
第三期
若菜から幻
第四期
匂宮から夢浮橋
重松信弘
正編青年期
桐壺から明石
正編中年期
澪標から藤裏葉
正編晩年期
若菜から竹河
続編
匂宮から夢浮橋
森岡常夫
第一期
桐壺から朝顔
第二期
少女から藤裏葉
第三期
若菜から幻
第四期
匂宮から夢浮橋
大野晋
a系
第一部(紫上系)
b系
第一部(玉鬘系)
c系=第二部
若菜から幻
d系=第三部
匂宮から夢浮橋