TablePressでテーブル作成

TablePress で table を作ってみました。

TablePress の plugin をインスールした常態では細かなテーブルの設定ができないようになっております。


TablePress で細やかなテーブルの設定は CSS を変更(?)というのか、新たに作成というのか・・、CSS の指定が必要となります。

今回、私が作成した table は width=450, height=90 のバナーです。　そして文字は左右上下とものセンターに来るように設定しました。

それを tablepress で行うには、使用する各テーブルごとに CSS を作成します。


CSS と遊ぶには、tablepress の table 作成画面の custom CSS をクリックして専用の画面で作業をします。　下記の画面が Custom CSS の作業画面となります。

CSS の詳細は、TablePress の公式サイトに非常に解り易く解説されていますので、そちらを参考なさってください。



 たとえば、テーブルの横幅を 450px に設定するには、下記のように記載します。


.tablepress-id-N .column-1 

{
  width: 450px !important;
}

上記の tablepress-id-N の N の部分には、変更を加えたい 

table の番号を入れます。

たとえば、変更を加えたい tabele が [table id=7 /] 

だったら N の部分を 7 に置き換えます。

 もし、[table id=1 /] で使用したければ N を 1 に

置き換えます。

たとえば、[table id=7 /] で、上下左右ともに文字を真ん

中に配置したい場合には下記のように CSS を書いてくだ

さい。

 .tablepress-id-7 .row-1 td {
 font-weight: bold;
 vertical-align: middle;
 text-align: center;
}

たとえば、文字のサイズを変更したければ下記のようにな

ります。

 
.tablepress-id-7 {
 font-size: 36px;
 color: #ffffff;
}

Tablepress の公式サイト中の faq には、テーブルに関して

知りたいことが網羅されているとおもいます。

英語ですが、それほど難しくはないと思います。