レイアウト見本:テーブル

簡易なテーブルはビジュアルエディターのテーブルブロックが楽。

少し手の込んだテーブルを作る場合、

列ヘッダタイプのテーブルはビジュアルエディターで大枠を作った後、カスタムHTML化をしてセル結合やセル毎の装飾をしていく。

製品仕様などの行ヘッダタイプのテーブルは最初からカスタムHTMLやメモ帳でコードを書いていく方が速い…かも。 ※個人の感想です。

デフォルト

ヘッダヘッダヘッダヘッダ
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
キャプション

ストライプ

ブロックエディターで「デフォルト」または「ストライプ」と選択できるようになっているが「デフォルト」に追加CSSクラスで「is-style-stripes」を指定しただけとも言える。

枠線無しのストライプの色が濃い目、だったけどデフォルトの色調整をしたので使わないかな。

ヘッダヘッダヘッダヘッダ
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
キャプション

デフォルト&追加CSSクラス

「デフォルト」に追加CSSクラスで指定したレイアウト見本

「no-stripe」ストライプ無効

ヘッダヘッダヘッダヘッダ
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
デフォルト&追加CSSクラス「no-stripe」

「hlinetable」横線あり・縦線なし

★テーブルにborder設定追加
border :1px solid #aaaaaa
★th・tdの変更点
border :#cccccc→transparent
border -top -bottom:1px solid #aaaaaa
内部余白広め padding:6px→8px 16px
ヘッダヘッダヘッダヘッダ
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
デフォルト&追加CSSクラス「hlinetable」

「font14table」フォントサイズ小さめ

ベンチマーク結果や比較表向けのテーブル(旧normalfont)

★デフォルトからの変更点
th font-size:18px→13px
td font-size:18px→14px
border:#cccccc→#b1b1ac
padding:6px→8px
ヘッダヘッダヘッダヘッダ
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
デフォルト&font14table

「font12table」フォントサイズ極小

「font14table」よりもさらに文字サイズ小さめ(旧:smallfonttable)

★デフォルトからの変更点
font-size:18px→12px
border:#cccccc→#b1b1ac
padding:6px→8px

他のフォントサイズと見比べると違和感しかないため大物スペックシートとか向け?

ヘッダヘッダヘッダヘッダ
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
デフォルト&font12table

複数の追加CSSクラス

「font14table」&「table-colorset-whitewhite」&「no-stripe」

table-colorset-whitewhite
th background-color: #f5f6f7→#ffffff
td background-color: #ffffff→#ffffff ※デフォルトが白の為不要
ヘッダヘッダヘッダヘッダ
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
「font14table」&「table-colorset-whitewhite」&「no-stripe」

「font14table」&「table-colorset-graywhite」&「no-stripe」

table-colorset-graywhite
th background-color: #f5f6f7→#dfdfdf
td background-color: #ffffff→#ffffff ※デフォルトが白の為不要
ヘッダヘッダヘッダヘッダ
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
テストtdテストtdテストtdテストtdテストtd
「font14table」&「table-colorset-graywhite」&「no-stripe」

カスタムHTMLによるテーブル記述

「font14table」&「table-colorset-graywhite」&「no-stripe」のテーブルをカスタムHTMLでいじったレイアウト見本

行ヘッダ通常行おおおおおおおおおおおお通常行cell-color-pink
行ヘッダあああああ行ヘッダright通常行cell-color-yellow
行ヘッダ行ヘッダcenter通常行cell-color-forest
行ヘッダtext-color-red通常行cell-color-wasteland
行ヘッダ行ヘッダセンターtext-color-scarlet↓2重罫線cell-color-landcoral
行ヘッダ右寄せtext-color-scarletcell-color-miasma
行ヘッダ行ヘッダ右寄せtext-color-redcell-color-lava
行ヘッダcentercentercenter
行ヘッダcentercentercenter
行ヘッダcentercentercenter
行ヘッダ左col3centercentercenter
行ヘッダ左col2center
center
centercenter
行ヘッダ左col2centercentercenter
行ヘッダ左row3center
center
centercenter
行ヘッダ左col2center
center
centercenter
行ヘッダ左col2center
center
centercenter
カスタムHTMLによるレイアウト見本

タイトルとURLをコピーしました