Cocoon【スキン：Silk】テーブルスタイル見本

テーブルブロックを使って作る【表】のスタイル見本です。

Cocoonデフォルト

Cocoonでスキン「なし」の場合、テーブルのデフォルトスタイルはこちら↓

シンプルですが、1行ごとに背景色が付くデザインになっています。

Cocoon 【スキン：Silk】適用時のスタイル

スキンのSilkを適用している場合、テーブルのスタイルが追加されます。

［設定」オプションでヘッダー/フッターの表示・非表示が選択できます。

スタイル： デフォルト

Silkでは、テーブルのデフォルトが「格子のみ」のデザインになります。

ヘッダー／フッター なし

ヘッダー／フッターあり

表のセル幅を固定

下のサンプルは画像化したものなので分かりづらいですが、「表のセル幅を固定」にすると、テーブルはカラムいっぱいに広がり、列幅が等幅になります。

スタイル： ストライプ

ヘッダー／フッター なし

ヘッダー／フッター あり

表のセル幅を固定

スタイル： 中央寄せ

ヘッダー／フッター なし

ヘッダー／フッター あり

表のセル幅を固定

スタイル： 水平

ヘッダー／フッター なし

ヘッダー／フッター あり

表のセル幅を固定

スタイル： キーカラー

ヘッダー／フッター なし

ヘッダーやフッターがないと、スタイル「ストライプ」に罫線が表示されたタイプに見えます。

ヘッダー／フッター あり

ヘッダーがある場合は、ヘッダーにキーカラーの背景色が付きます。

キーカラーとは、［Cocoon設定」→［全体」で設定したサイト全体のキーカラーのことです。

表のセル幅を固定

テーブルをカスタマイズする

スタイル「ストライプ」に罫線を表示する

.wp-block-table.is-style-stripes td, 
.wp-block-table.is-style-stripes th {
    border: 1px solid #e3e3e3;
}

スタイル「中央寄せ」の罫線カラーを変更する

.wp-block-table.is-style-center-cell td,
.wp-block-table.is-style-center-cell th {
    border-color: #e3e3e3;
}

スタイル「水平」の1列目テキストを中央揃えにする

.wp-block-table.is-style-horizon td:first-child {
    text-align: center;
}

スタイル「キーカラー」の罫線カラーを変更する

目立ちすぎる罫線を薄いグレーに色を変え、ヘッダー内の列の境界も見えやすくしたものです。

.wp-block-table.is-style-color-head td,
.wp-block-table.is-style-color-head th{
    border-color: #e3e3e3;
}
.wp-block-table.is-style-color-head th{
    border-width: 1px !important;
}