- Webサイトで表示している表を、見やすくしたい！
- 表が味気ないのでスタイリッシュにしたい！
- 表によってレイアウトを使い分けたい！
WordPressプラグイン「TablePress」を使うと、高機能な表が簡単に作成できます。
ただ、意外とこの表の「デザイン」に困ることが多いんです。
- 記事中の表はこのデザイン
- 価格と提供サービスを表すのはこのデザイン
というように、理解しやすくするために、複数のデザインを使い分けたいことも多いです。
そこで今回は、「コピペOK」のTablePressデザイン用CSSを5つ、紹介します。気に入ったものがあれば、どんどんコピペして使ってください！
この記事に掲載しているCSSテンプレートは「TablePress」のカスタムCSSに組み込み使ってください。
簡単に表が作れるプラグイン「TablePress」
表はWordPressの標準機能でも作れますが、見た目を良くしたいのであれば「TablePress」がおすすめです。
「TablePress」を使ったことがないという人は、「レスポンシブ対応の「表」を簡単に作れる！「TablePress」プラグインを徹底解説！」で徹底的に解説していますので、そちらもあわせて参考にしてください。
基本的な使い方
下準備
まず、お好きなデザインの表のCSSをコピーします。
次に、WordPressの左メニュー > TablePress > プラグインのオプション を開き、CSSを貼り付けます。
画面の下に「変更を保存」ボタンがあるので、お忘れなく！
複数のデザインを入れたい場合は、どんどん下に追記してください。
TablePressで表を作成するとき
実際に表を作成するときに、データ入力画面の下部にある「テーブルのオプション」項目に「追加のCSSクラス」という項目があります。
ここに、使いたいデザインのクラス名（例「tablspress_01」）を入力すると、さきほど貼り付けたCSSが呼び出され、指定した表のデザインが適用されます。
この項目に直接CSSを入力してはダメです。また、「class=”tablepress_01″」のように書く必要はありません。クラス名（「tablepress_01」など）だけでOKです。
コピペOK!「TablePress」で使える目的別CSS
WordPressプラグイン「TablePress」で使える表のCSSを、目的別に5つ作ってみました。
TablePressデザインサンプル ①ランキング表
まずは、ランキング表を意識したシンプルなCSSです。
表を自由に構成してもレイアウトが崩れることがないので、色々な用途で使えます。
表の構成
こちらはTablePressのデータ入力画面です。
この表は「列の数」や「行の数」の制限はありませんので、必要に応じて変更してください。
TeblePressのオプションには下記にチェックを入れています。
- テーブルの見出し行
- テーブル名を表示: テーブルの上に表示
CSSの特徴など
この表は次のような工夫をしています。
- 文字の中央そろえ
- 罫線あり
- 1番から3番までは、王冠のアイコンを表示
- 王冠のアイコンは金銀銅の3種類
この表の一番上の行の1列目の先頭には自動的に「金の王冠マーク」2番目に「銀の王冠マーク」3番目に「銅の王冠マーク」が付きます。
この表のアイコンには外部ツールのFontAwesomeを利用していますので、再現するにはあらかじめFontAwesomeの設定が必要です。
FontAwesomeの使い方は「アイコンが使い放題になるプラグイン「Font Awesome」を徹底解説！」で解説しています。
コピペ用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;
}
TablePressデザインサンプル ②機能の比較表CSS
無料プランと有料プランの性能を比較する表CSSです。
ネットサービスの有料プランの案内によくある「有料プランにするとこんなに多くの機能が使えるようになりますよ！」という内容の表です。
ネットサービスだけでなく、プランが複数ある場合はどのような業種のサービスにも応用できます。
表の構成
B列の1行目からD列の10行目までのチェックマークにFontAwesomeを使用していますが、この部分を他の文字や数字に置き換えていただいてもかまいません。
この表は列や行を増やしたり減らしたりしてもレイアウトが崩れることはありません。
このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます。
CSSの特徴など
この表は次のような工夫をしています。
- 隣のセルとの間に距離を一定の間隔に設定
- チェックマークを中央そろえ
- タイトルの背景色と文字色を変更
- 1番左の列以外の文字色を緑で統一
- 1番左の列の幅を固定
コピペ用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;
}
TablePressデザインサンプル ③プラン比較表CSS（その１）
プランごとのサービスを比較する表のCSSです。
料金が上がることによって、できることがランクアップするような印象でプランを比較できます。
表の構成
この表は列や行を増やしたり減らしたりしてもレイアウトが崩れることはありません。
このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます。
CSSの特徴など
この表は次のような工夫をしています。
- 隣のセルとの間に距離を一定の間隔に設定
- タイトルと1行目のセルにグラデーションを設定
- 1行ごとに背景色を変更
- 2列目を他の列と区別するためにデザインを変更
- 2列目1行目の文字色、文字サイズを変更
コピペ用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;
}
TablePressデザインサンプル ④プラン比較表CSS（その２）
プランごとのサービスを比較する表のCSSです。
サーバーの性能比較などでよく使われている表で、月額料金の違いを同じ項目で比較したい時に適しています。
3-4-1. 表の構成
この表は列や行を増やしたり減らしたりしてもレイアウトが崩れることはありません。
このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます。
CSSの特徴など
この表は次のような工夫をしています。
- 隣のセルとの間に距離を一定の間隔に設定
- freeプラン、限定プラン、その他のプランでレイアウトを変更
- 1行ごとに背景色を変更
- 2列目を他の列と区別するためにデザインを変更
- 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;
}
TablePressデザインサンプル ⑤プラン比較表CSS（その３）
プランごとのサービスを比較する表のCSSです。
基本的には「プラン比較表CSSその2」と同じような内容ですが、レイアウトにこだわって作ってみました。
見た目はスタイリッシュにできましたが、汎用性には欠けています。
表の構成
パッと見は4カラムですが、実は8カラム構成で作っています。
かなり細かくCSSを設定しているので、カラムを追加すると全体の印象がかなり変わってしまいます。
10カラム以上で使う場合は、コピペ用CSSを参考にしてCSSを追加してください。
このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます。
CSSの特徴など
この表は次のような工夫をしています。
- 隣のセルとの間に距離を一定の間隔に設定
- 背景色をダークカラーで統一
- 1列ごとに背景色を変更
- 2列目を他の列と区別するためにデザインを変更
- 2列目を他よりも大きく見えるようにデザイン
この表はWebサイトで確認すると4カラムで構成されていますが、セルの結合を利用していますので、実質8カラムで構成されています。
CSSでは指定するセルの列数は、表示されたカラムではなく構成画面でのカラム数なので注意が必要です。
コピペ用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;
}
まとめ
この記事に掲載している表の中で使ってみたいと思った表があればどんどんコピペして使ってください。
もちろん色や構成は、あなたの作りたい表に合わせて変えて頂いても構いません。
このCSSを使うには、WordPressプラグイン「TablePress」が必要ですので、まだインストールしていない人は、レスポンシブ対応の「表」を簡単に作れる！「TablePress」プラグインを徹底解説！を参考にしてください。