コピペOK！WordPressプラグイン「TablePress」で見やすい表を作る5種類のCSSを公開！

WordPressプラグイン「TablePress」を使うと、高機能な表が簡単に作成できます。

ただ、意外とこの表の「デザイン」に困ることが多いんです。

• 記事中の表はこのデザイン
• 価格と提供サービスを表すのはこのデザイン

というように、理解しやすくするために、複数のデザインを使い分けたいことも多いです。

そこで今回は、「コピペOK」のTablePressデザイン用CSSを5つ、紹介します。気に入ったものがあれば、どんどんコピペして使ってください！

 

1. 簡単に表が作れるプラグイン「TablePress」

表はWordPressの標準機能でも作れますが、見た目を良くしたいのであれば「TablePress」がおすすめです。

「TablePress」を使ったことがないという人は、以下の記事で徹底的に解説していますので、そちらもあわせて参考にしてください。

 

2. 基本的な使い方

2-1. 下準備

まず、お好きなデザインの表のCSSをコピーします。

次に、WordPressの左メニュー > TablePress > プラグインのオプション を開き、CSSを貼り付けます。

画面の下に「変更を保存」ボタンがあるので、お忘れなく！

 

2-2. TablePressで表を作成するとき

実際に表を作成するときに、データ入力画面の下部にある「テーブルのオプション」項目に「追加のCSSクラス」という項目があります。

ここに、使いたいデザインのクラス名（例「tablspress_01」）を入力すると、さきほど貼り付けたCSSが呼び出され、指定した表のデザインが適用されます。

 

3. コピペOK!「TablePress」で使える目的別CSS

WordPressプラグイン「TablePress」で使える表のCSSを、目的別に5つ作ってみました。

 

3-1. TablePressデザインサンプル　①ランキング表

まずは、ランキング表を意識したシンプルなCSSです。

表を自由に構成してもレイアウトが崩れることがないので、色々な用途で使えます。

 

3-1-1. 表の構成

こちらはTablePressのデータ入力画面です。

この表は「列の数」や「行の数」の制限はありませんので、必要に応じて変更してください。

TeblePressのオプションには下記にチェックを入れています。

• テーブルの見出し行
• テーブル名を表示: テーブルの上に表示

 

3-1-2. CSSの特徴など

この表は次のような工夫をしています。

• 文字の中央そろえ
• 罫線あり
• 1番から3番までは、王冠のアイコンを表示
• 王冠のアイコンは金銀銅の3種類

この表の一番上の行の1列目の先頭には自動的に「金の王冠マーク」2番目に「銀の王冠マーク」3番目に「銅の王冠マーク」が付きます。

 

3-1-3. コピペ用CSS

TablePressのプラグインオプションのカスタムCSSに張り付けたあとに、 テーブルの追加CSSクラスに「tablepress_01」を指定します。

.tablepress_01 th,
.tablepress_01 td {
	text-align: center;
	border: solid 1px black !important;
}
.tablepress_01 .row-2 .column-1::before {
	font-family: "Font Awesome 5 Free";/*FontAwesome呼び出し*/
	font-weight: 900;/*これがないとアイコンが読み込めない*/
	font-size: 1.5em;
	content: "\f521";/*Font Awesomeのアイコン記号*/
	color: gold; /* 色 */
	position: relative;
	left: -10px;
	top: 0;
}
.tablepress_01 .row-3 .column-1::before {
	font-family: "Font Awesome 5 Free";　/*FontAwesome呼び出し*/
	font-weight: 900;/*これがないとアイコンが読み込めない*/
	font-size: 1.5em; 
	content: "\f521"; /*Font Awesomeのアイコン記号*/
	color: silver; /* 色 */
	position: relative;
	left: -10px;
	top: 0;
}
.tablepress_01 .row-4 .column-1::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.5em; /*content: "\f14a"; アイコン*/
	content: "\f521";
	color: brown; /* 色 */
	position: relative;
	left: -10px;
	top: 0;
}

3-2. TablePressデザインサンプル　②機能の比較表CSS

無料プランと有料プランの性能を比較する表CSSです。

ネットサービスの有料プランの案内によくある「有料プランにするとこんなに多くの機能が使えるようになりますよ！」という内容の表です。

ネットサービスだけでなく、プランが複数ある場合はどのような業種のサービスにも応用できます。

 

3-2-1. 表の構成

B列の1行目からD列の10行目までのチェックマークにFontAwesomeを使用していますが、この部分を他の文字や数字に置き換えていただいてもかまいません。

この表は列や行を増やしたり減らしたりしてもレイアウトが崩れることはありません。

 

3-2-2. CSSの特徴など

この表は次のような工夫をしています。

• 隣のセルとの間に距離を一定の間隔に設定
• チェックマークを中央そろえ
• タイトルの背景色と文字色を変更
• 1番左の列以外の文字色を緑で統一
• 1番左の列の幅を固定

 

3-2-3. コピペ用CSS

このCSSを使うには、TablePressのプラグインオプションのカスタムCSSに張り付けたあとに、 テーブルの追加CSSクラスに「tablepress_02」を指定します。

.tablepress_02 {
	border-collapse: separate; /*セルの間に空間を開ける*/
	border-spacing: 5px 0; /*隣のセルとの間に距離*/
	padding: 10px 0;
	color: green; /*好きな色に変えてください*/
}
.tablepress_02 th,
.tablepress_02 td {
	text-align: center;
}
.tablepress_02 tr td {
	padding: 10px 2px;
}
.tablepress_02 th {
	background-color: green !important;
	color: #fff;
}
.tablepress_02 .odd td {
	background-color: #CDE9FF !important;
}
/*1番左の列*/
.tablepress_02 .column-1 {
	width: 250px;
	text-align: left;
}
/*それ以外の列*/
.tablepress_02 .column-1 {
	color: #333333;
}
.tablepress_02 th.column-1 {
	background-color: #fff !important;
	color: Green;
	font-size: 1.3em;
}

3-3. TablePressデザインサンプル　③プラン比較表CSS（その１）

プランごとのサービスを比較する表のCSSです。

料金が上がることによって、できることがランクアップするような印象でプランを比較できます。

 

3-3-1. 表の構成

この表は列や行を増やしたり減らしたりしてもレイアウトが崩れることはありません。

 

3-3-2. CSSの特徴など

この表は次のような工夫をしています。

• 隣のセルとの間に距離を一定の間隔に設定
• タイトルと1行目のセルにグラデーションを設定
• 1行ごとに背景色を変更
• 2列目を他の列と区別するためにデザインを変更
• 2列目1行目の文字色、文字サイズを変更

 

3-3-2. コピペ用CSS

このCSSを使うには、TablePressのプラグインオプションのカスタムCSSに張り付けたあとに、 テーブルの追加CSSクラスに「tablepress_03」を指定します。

.tablepress_03 {
	border-collapse: separate; /*セルの間に空間を開ける*/
	border-spacing: 12px 0; /*隣のセルとの距離*/
	padding: 10px 0;
}
.tablepress_03 th,
.tablepress_03 td {
	text-align: center; /*文字の中央ぞろえ*/
	border-top: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;
}
.tablepress_03 td {
	padding: 15px 5px;
}
/*タイトルと一番上の行*/
.tablepress_03 th,
.tablepress_03 .row-2 td {
	background: linear-gradient(-90deg,#009ADB,#00DB9A); /* 背景をグラデーションに*/
	color: #fff; /*文字色 白*/
}
.tablepress_03 .row-1 .column-2 {
	background: linear-gradient(-90deg,#EE52FF,#009ADB);
}
.tablepress_03 .row-2 .column-2 {
	background: linear-gradient(-90deg,#EE52FF,#009ADB);
	font-size: 120%;
	color: pink;
}

3-4. TablePressデザインサンプル　④プラン比較表CSS（その２）

プランごとのサービスを比較する表のCSSです。

サーバーの性能比較などでよく使われている表で、月額料金の違いを同じ項目で比較したい時に適しています。

 

3-4-1. 表の構成

この表は列や行を増やしたり減らしたりしてもレイアウトが崩れることはありません。

 

3-4-2. CSSの特徴など

この表は次のような工夫をしています。

• 隣のセルとの間に距離を一定の間隔に設定
• freeプラン、限定プラン、その他のプランでレイアウトを変更
• 1行ごとに背景色を変更
• 2列目を他の列と区別するためにデザインを変更
• 2列目を他よりも大きく見えるようにデザイン

 

3-4-2. コピペ用CSS

このCSSを使うには、TablePressのプラグインオプションのカスタムCSSに張り付けたあとに、 テーブルの追加CSSクラスに「tablepress_04」を指定します。

.tablepress_04 {
	border-collapse: separate; /*セルの間に空間を開ける*/
	border-spacing: 5px 0; /*隣のセルとの距離*/
	padding: 10px 0;
}
.tablepress_04 th,
.tablepress_04 td {
	text-align: center;
}
.tablepress_04 tr td {
	padding: 10px 2px;
}
/* タイトル設定*/
.tablepress_04 th {
	height: 150px;
	padding: 50px 0 0 0;
	background-clip: content-box; /*背景色パディング無効*/
	background-color: #FEB602 !important;
}
/*行設定*/
.tablepress_04 .row-2 td {
	font-size: 2.2em;
	font-weight: bold;
}
.tablepress_04 .row-3 td {
	font-weight: bold;
}
.tablepress_04 .row-4 td {
	color: #fff;
	padding: 5px;
	background-clip: content-box; /*背景色パディング無効*/
	background-color: #FFB701 !important;
}
.tablepress_04 .row-5 td {
	font-size: 2px;
}

.tablepress_04 .row-7 td {
	font-size: 8px;
}
.tablepress_04 .row-8 td {
	font-size: 2em;
	font-weight: bold;
}
/*注目カラム---------*/
.tablepress_04 th.column-2 {
	padding: 0;
	border-top: solid 3px #F26B42;
	width: 200px;
	background-color: #F26B42 !important;
	font-size: 2em;
}
.tablepress_04 .row-4 .column-2 {
	background-color: #F26B42 !important;
}
/*注目カラムボーダー*/
.tablepress_04 .column-2 {
	border-left: solid 3px #F26B42;
	border-right: solid 3px #F26B42;
}
.tablepress_04 .row-9 .column-2 {
	border-bottom: solid 3px #F26B42;
}
/*注目カラム2-----------*/
.tablepress_04 th.column-1 {
	background-color: #bfbfbf !important;
}
.tablepress_04 .row-4 .column-1 {
	background-color: #bfbfbf !important;
}

3-5. TablePressデザインサンプル　⑤プラン比較表CSS（その３）

プランごとのサービスを比較する表のCSSです。

基本的には「プラン比較表CSSその2」と同じような内容ですが、レイアウトにこだわって作ってみました。

見た目はスタイリッシュにできましたが、汎用性には欠けています。

 

3-5-1. 表の構成

パッと見は4カラムですが、実は8カラム構成で作っています。

かなり細かくCSSを設定しているので、カラムを追加すると全体の印象がかなり変わってしまいます。

10カラム以上で使う場合は、コピペ用CSSを参考にしてCSSを追加してください。

 

3-5-2. CSSの特徴など

この表は次のような工夫をしています。

• 隣のセルとの間に距離を一定の間隔に設定
• 背景色をダークカラーで統一
• 1列ごとに背景色を変更
• 2列目を他の列と区別するためにデザインを変更
• 2列目を他よりも大きく見えるようにデザイン

 

3-5-3. コピペ用CSS

このCSSを使うには、TablePressのプラグインオプションのカスタムCSSに張り付けたあとに、 テーブルの追加CSSクラスに「tablepress_05」を指定します。

.tablepress_05 {
	border-spacing: 0; /*隣のセルとの距離*/
	padding: 0;
}
.tablepress_05 th,
.tablepress_05 td {
	text-align: center;
}
.tablepress_05 tr td {
	padding: 10px 2px;
	background-color: #444444 !important;
	color: #fff;
	border: none;
	font-size: 13px;
}
/*列設定*/
.tablepress_05 .column-1 {
	text-align: center;
	color: #baa96d;
}
.tablepress_05 .column-2 {
	text-align: left;
}
.tablepress_05 .column-3 {
	text-align: center;
	color: #baa96d;
	background-color: #333333 !important;
}
.tablepress_05 .column-4 {
	text-align: left;
	background-color: #333333 !important;
}
.tablepress_05 .column-5 {
	text-align: center;
	color: #baa96d;
}
.tablepress_05 .column-6 {
	text-align: left;
}
.tablepress_05 .column-7 {
	text-align: center;
	color: #baa96d;
	background-color: #333333 !important;
}
.tablepress_05 .column-8 {
	text-align: left;
	background-color: #333333 !important;
}
/*header*/
.tablepress_05 th {
	height: 40px;
	background-clip: content-box; /*背景色パディング無効*/
	padding: 15px 0 0 0;
}
.tablepress_05 th.column-1 {
	background-color: #ae86c4 !important;
	text-align: center;
	color: #fff;
}
.tablepress_05 th.column-3 {
	padding-top: 0;
	background-color: #dc5843 !important;
	text-align: center;
	color: #fff;
}
.tablepress_05 th.column-5 {
	background-color: #3793C7 !important;
	text-align: center;
	color: #fff;
}
.tablepress_05 th.column-7 {
	background-color: #8eb816 !important;
	text-align: center;
	color: #fff;
}
/*個別設定*/
/*行設定*/
.tablepress_05 .row-2 .column-1 {
	text-align: right;
	font-size: 2em;
	color: #fff;
}
.tablepress_05 .row-2 .column-2 {
	color: #ae86c4;
}
.tablepress_05 .row-3 .column-1 {
	color: #ae86c4;
}
.tablepress_05 .row-4 .column-1 {
	color: #ae86c4;
}
.tablepress_05 .row-2 .column-3 {
	text-align: right;
	font-size: 2em;
	color: #fff;
}
.tablepress_05 .row-2 .column-4 {
	color: #dc5843;
}
.tablepress_05 .row-3 .column-3 {
	color: #dc5843;
}
.tablepress_05 .row-4 .column-3 {
	color: #dc5843;
}

.tablepress_05 .row-2 .column-5 {
	text-align: right;
	font-size: 2em;
	color: #fff;
}
.tablepress_05 .row-2 .column-6 {
	color: #3793C7;
}
.tablepress_05 .row-3 .column-5 {
	color: #3793C7;
}
.tablepress_05 .row-4 .column-5 {
	color: #3793C7;
}
.tablepress_05 .row-2 .column-7 {
	text-align: right;
	font-size: 2em;
	color: #fff;
}
.tablepress_05 .row-2 .column-8 {
	color: #8eb816;
}
.tablepress_05 .row-3 .column-7 {
	color: #8eb816;
}
.tablepress_05 .row-4 .column-7 {
	color: #8eb816;
}

4. まとめ

この記事に掲載している表の中で使ってみたいと思った表があればどんどんコピペして使ってください。

もちろん色や構成は、あなたの作りたい表に合わせて変えて頂いても構いません。

このCSSを使うには、WordPressプラグイン「TablePress」が必要ですので、まだインストールしていない人は、レスポンシブ対応の「表」を簡単に作れる！「TablePress」プラグインを徹底解説！を参考にしてください。