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

こんな方に読んで欲しい！

Webサイトで表示している表を、見やすくしたい！
表が味気ないのでスタイリッシュにしたい！
表によってレイアウトを使い分けたい！

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

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

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

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

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

ここがポイント！

この記事に掲載しているCSSテンプレートは「TablePress」のカスタムCSSに組み込み使ってください。

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

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

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

インターネットビジネスラボ

レスポンシブ対応の「表」を簡単に作れる！「TablePress」プラグインを徹底解説！

今回の記事では、簡単に見やすい表をつくることができるWordPressプラグイン「TablePress」を徹底解説します！

2. 基本的な使い方

2-1. 下準備

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

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

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

ここがポイント！

複数のデザインを入れたい場合は、どんどん下に追記してください。

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

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

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

ここがポイント！

この項目に直接CSSを入力してはダメです。また、「class="tablepress_01"」のように書く必要はありません。クラス名（「tablepress_01」など）だけでOKです。

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番目に「銅の王冠マーク」が付きます。

ここに注意！

この表のアイコンには外部ツールのFontAwesomeを利用していますので、再現するにはあらかじめFontAwesomeの設定が必要です。

インターネットビジネスラボ

アイコンが使い放題になるプラグイン「Font Awesome」を徹底解説！

ブログ内でアイコンが使えるとサイトが豪華に見えるうえ、内容がイメージしやすくなり記事が読みやすくなります。

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;
}<br />

.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を使用していますが、この部分を他の文字や数字に置き換えていただいてもかまいません。

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

ここに注意！

このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます。

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;
}<br />

.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. 表の構成

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

ここに注意！

このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます。

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;
}<br />

.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. 表の構成

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

ここに注意！

このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます。

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;
}<br /><br />

.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を追加してください。

ここに注意！

このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます。

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

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

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

ここがポイント！

この表はWebサイトで確認すると4カラムで構成されていますが、セルの結合を利用していますので、実質8カラムで構成されています。

ここに注意！

CSSでは指定するセルの列数は、表示されたカラムではなく構成画面でのカラム数なので注意が必要です。

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;
}<br />

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

.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」プラグインを徹底解説！を参考にしてください。

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

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

2. 基本的な使い方

2-1. 下準備

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

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

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

3-1-1. 表の構成

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

3-1-3. コピペ用CSS

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

3-2-1. 表の構成

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

3-2-3. コピペ用CSS

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

3-3-1. 表の構成

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

3-3-2. コピペ用CSS

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

3-4-1. 表の構成

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

3-4-2. コピペ用CSS

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

3-5-1. 表の構成

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

3-5-3. コピペ用CSS

4. まとめ

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

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

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

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

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