簡易なテーブルはビジュアルエディターのテーブルブロックが楽。
少し手の込んだテーブルを作る場合、
列ヘッダタイプのテーブルはビジュアルエディターで大枠を作った後、カスタム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 |
「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 |
「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 |
「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 |
複数の追加CSSクラス
「font14table」＆「table-colorset-whitewhite」
- 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-graywhite」
- 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 |
カスタム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-scarlet | cell-color-miasma | |||
| 行ヘッダ | 行ヘッダ | 右寄せtext-color-red | cell-color-lava | ||
| 行ヘッダ | center | center | center | ||
| 行ヘッダ | center | center | center | ||
| 行ヘッダ | center | center | center | ||
| 行ヘッダ左col3 | center | center | center | ||
| 行ヘッダ左col2 | center center | center | center | ||
| 行ヘッダ左col2 | center | center | center | ||
| 行ヘッダ左row3 | center center | center | center | ||
| 行ヘッダ左col2 | center center | center | center | ||
| 行ヘッダ左col2 | center center | center | center | ||
