テーブル作成プラグイン「TablePress」の使い方と装飾方法


「TablePress」はテーブルが簡単に作成できるプラグインです。

HTMLで自作してもいいのですが、
複雑なテーブルになってくるとタグがごちゃごちゃして
自分でも何が何だか分からなってきたり(-_-;)

というわけで「TablePress」の使い方と
おまけに装飾方法やセルの結合の仕方なんかを書いておきます。

テーブルのHTML

ちなみにテーブルを自作する時のHTML(超基本形)はこちら。

わざわざプラグインを使うほどでもないかなっていう場合は
私もこの形をベースにテーブルを作成していきます。

<table>
<tbody>

<tr>
<td>1列目の左</td>
<td>1列目の真ん中</td>
<td>1列目の右</td>
</tr>

<tr>
<td>2列目の左</td>
<td>2列目の真ん中</td>
<td>2列目の右</td>
</tr>

</tbody>
</table>
1列目の左 1列目の真ん中 1列目の右
2列目の左 2列目の真ん中 2列目の右

テーブルデモ

それでは今回は「TablePress」を活用して
こんなテーブルを作成していきます。

 
エックスサーバー
ロリポップ
さくらサーバー
月額1,000円500円429円
初期費用3,000円1,500円1,029円
ディスクスペース200GB120GB100GB
MySQL30個30個20個
WordPressインストール機能
対応
マルチドメイン無制限100個20個
メールアカウント
無制限

プラグインのインストールと設定

「TablePress」は管理画面から検索できます。
インストール後有効化してください。

有効化すると管理画面左側のメニューに「TablePress」が追加されます。

初期設定は特に必要ないんですが・・・

いきなりテーブルを作ってみるとこんな風になりました。
縦の線が表示されてないっていうね(´・_・`)

WordPressNAVI

いいっちゃいいんですけど、縦の線もあった方が分かりやすいので
下記の場所にCSSを追記しました。

「管理画面」→「TablePress」→「プラグインのオプション」→「カスタムCSS」
※上部のタブに「プラグインのオプション」があります

.tablepress tbody td,
.tablepress tfoot th {
	border: 1px solid #ccc;
}

テーブルの新規作成

「TablePress」にカーソルを合わせて
「新しいテーブルを追加」をクリックします。

テーブル作成プラグイン「TablePress」の使い方と装飾方法

続いて作成するテーブルの設定を行います。

テーブルの追加

「説明」は記入しなくても問題ありません。

行と列は私もよく分からなくなるんですが(笑)、

行:横に何分割するか
列:縦に何分割するか

と覚えていただけたらと思います。
列はサイトのレイアウトなどで言われる「カラム数」のことですね!

ここの項目はあとで変更できるので何となくこれくらいかなっていうイメージで。

では、「テーブルを追加」をクリックして中身を作成していきましょう。
デモテーブルはこんな感じで記入してみました。

テーブル作成プラグイン「TablePress」の使い方と装飾方法

ヘッダーが不要な場合はテーブル編集画面の
「テーブルのオプション」から設定を切り替えてください。

テーブルが完成したら保存し、
[table id=1 /]という形のショートコードを記事に記入すると
テーブルが反映されます。

セルの結合を行う場合

「TablePress」には訪問者が自由に
テーブルの並び替えを行える機能が備わっています。

※テーブル編集画面の「DataTables JavaScriptライブラリ設定」で詳細設定が可能。
 日本語なので分かりやすいと思います。

ですがセルの結合をした場合、この機能は使えなくなってしまいますので注意。

上記のデモテーブルでは「WordPressインストール機能」と
「メールアカウント」でセルの結合を行なっています。

行を結合する場合:1番左にだけ記入して右には「#colspan#」と入力
列を結合する場合:1番上にだけ記入して下には「#rowspan#」と入力

統一したセル内の文字を真ん中寄せに表示させる場合は
文字を以下のタグで囲んで入力します。

<div align="center">文字</div>

テーブルの装飾を行う場合

デモテーブルでは任意の場所に背景色を付けています。

これは下記の場所にCSSを追記します。

「管理画面」→「TablePress」→「プラグインのオプション」→「カスタムCSS」
※上部のタブに「プラグインのオプション」があります

デモテーブルと合わせてご覧ください。

 
エックスサーバー
ロリポップ
さくらサーバー
月額1,000円500円429円
初期費用3,000円1,500円1,029円
ディスクスペース200GB120GB100GB
MySQL30個30個20個
WordPressインストール機能
対応
マルチドメイン無制限100個20個
メールアカウント
無制限
/* レンタルサーバー比較 */
.tablepress-id-1 .row-2 .column-4,
.tablepress-id-1 .row-3 .column-4,
.tablepress-id-1 .row-4 .column-2,
.tablepress-id-1 .row-5 .column-2,
.tablepress-id-1 .row-5 .column-3,
.tablepress-id-1 .row-7 .column-2 {
	background-color: #ffe5e5 !important; /* 背景色の指定 */
}

.tablepress-id-○:○にテーブルIDを記入
.row-2 .column-4:左側から何番目のセルか、上から何番目のセルか

ヘッダーも1列目に含まれます。

背景色でなく文字色を変更したい場合は
代わりにこのような記述をします。

	color: #ff0000 !important; /* 文字色の指定 */

というわけで、両方設定する場合はこのようになります。

/* レンタルサーバー比較 */
.tablepress-id-1 .row-2 .column-4,
.tablepress-id-1 .row-3 .column-4,
.tablepress-id-1 .row-4 .column-2,
.tablepress-id-1 .row-5 .column-2,
.tablepress-id-1 .row-5 .column-3,
.tablepress-id-1 .row-7 .column-2 {
	background-color: #ffe5e5 !important; /* 背景色の指定 */
	color: #ff0000 !important; /* 文字色の指定 */
}

別のセルに背景色、文字色をそれぞれ設定する場合は
上記のCSSをもう1セット追記して、セルの番号を再度指定します。

「!important」について

背景色指定部分に「!important」という記入がありますが
これは他のスタイルシートより優先して表示させるという意味です。

表示させる順序をあえて乱すという意味では
進んで使いたいコードではないので
特に気にならなければ強いて使用しなくてもかまいません。

セルの横幅を指定する場合

テーブルのセルの横幅は初期設定のままだと自動で調整されます。

手動で幅を変更する場合はショートコードに記述を付け加えます。

元のコード:[table id=1 /]

幅調整のコード:[table id=1 column_widths="20%|40%|40%" /]

このように左の列から順に幅を指定します。
%で幅を指定する際は合計が100%になるよう指定してください。

なお、pxでも指定可能です。

ちなみに、テーブル全体の幅を指定する場合は
カスタムCSSに以下を追記すると変更できます。

.tablepress-id-1 {
	width: 80%; /* テーブル幅の指定 */
}

あとがき!

「TablePress」の解説は以上です(*^^*)

簡単に綺麗なテーブルが作成できるので便利ですね。

より詳細な使い方はTablePress公式サイトにありますが
英語なのでChromeの翻訳機能など使ってみてください~。

ただしショートコードとかも翻訳されます(笑)

TablePress公式サイトはこちらから

  • このエントリーをはてなブックマークに追加

こんな記事も書きました!

popular-widget

新着・人気記事の切替表示ができるプラグインPopular Widget

サイドバーによく読まれている記事(人気記事)を表示させるプラグインといったら 「WordPress...

記事を読む

BackWPup

最低限入れておくべきプラグイン一覧

プラグインをインストールする前に はじめに、WordPressにインストールしておくべきプラグイン...

記事を読む

wpnavi

簡単!アメブロからWordPressへの移行方法

今日はアメブロの記事をWordPressに移行する方法を書きます。 移行についての前置き ...

記事を読む

PS-Auto-Sitemap

サイトマップ作成プラグイン「PS Auto Sitemap」の設定とスタイル一覧

サイトマップについての前置き サイトマップとは、サイト内にあるページを一覧表示させて サイトに来...

記事を読む

パーマリンクの「category」を非表示にするには?

パーマリンクの「category」を非表示にするには?

カテゴリーベースについての前置き WordPressでは、カテゴリーページにアクセスすると この...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • IMG_1137_100x130

    // mayu
    次世代型Web資産形成プロジェクト
    代表
    mayu official site
    Facebook

    mayu的思考やどうでもいいことをたまにつぶやいてます。
    お気軽にフォローしてみてくださいね!

  • WordPress Theme Park フリーWEB素材 Re:vre
flower