TablePress CSS

美しい表組を自在に。

簡単で文字量も少ないモノならWordPress標準のテーブルブロックでもかまわない場合もあるでしょう。でも下記のサンプルのような複雑なものだとプラグインTablePressが楽です。

セル同士の結合は #colspan# と #rowspan# を駆使し、任意のセルの背景色はCSSで指定。大きな表は横幅固定し横スクロールとするのもアリですね。

グループ1グループ2
特別仕様-特別仕様-
システム本体費用初期27,800 円20,800 円12,800 円9,800 円
5,800 円
月額27,800 円20,800 円12,800 円9,800 円
5,800 円
保守管理〇
ファーム自動更新〇
サポートメールサポート〇
電話サポート〇
24h電話サポート10,000 円
付属機能機能1〇
機能2〇
機能3〇✕
機能4〇✕
機能5〇✕

TablePressの追加CSS

.tablepress thead th,
.tablepress td {
	white-space: nowrap;
}

.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4,
.tablepress-id-1 .column-5,
.tablepress-id-1 .column-6,
.tablepress-id-1 .column-7 {
	text-align: center;
}

.tablepress-id-1 .row-1,
.tablepress-id-1 .row-2 .column-1,
.tablepress-id-1 .row-2 .column-2 {
	background-color: #ebebeb;
}

ショートコードオプション

<div style="overflow-x: scroll;"> [table id=1 /] </div>

まとめ

TablePressを使えばエクセルのような表現は可能ですが、表組にこだわらず違う機能の検討も必要です。

「商品比較」に特化し下記のようなアコーディオン形式もアリですね。レイアウト占有面積が減ってスマホで見やすくなります。さらに商品写真も付加できて掲載情報は増やせますね。参考になれば幸いです。

グループ 1 特別版（27,800円）

初期費用 27,800 円
月額費用 27,800 円

保守管理
ファーム自動更新
メールサポート
電話サポート

付属機能 1
付属機能 2
付属機能 3
付属機能 4
付属機能 5

グループ 1 通常版（20,800円）

初期費用 20,800 円
月額費用 20,800 円

保守管理
ファーム自動更新
メールサポート
電話サポート

付属機能 1
付属機能 2
付属機能 3
付属機能 4
付属機能 5

グループ 2 特別版（12,800円）

初期費用 12,800 円
月額費用 12,800 円

保守管理
ファーム自動更新
メールサポート
電話サポート

付属機能 1
付属機能 2

グループ 2 通常版（5,800円）

初期費用 5,800 円
月額費用 5,800 円

保守管理
ファーム自動更新
メールサポート
電話サポート

付属機能 1
付属機能 2

Z BLOGWordPress