TablePressを使ってできる色々な装飾の使い方についてご紹介しましょう。

セルの結合をする

この表では「WPインストール機能」と「マルチドメイン」の所でセルが結合されています。

行を結合する場合：1番左にだけ記入して右には「#colspan#」と入力（横につなげる）
列を結合する場合：1番上にだけ記入して下には「#rowspan#」と入力（縦につなげる）

結合したセル内の文字を中央に寄せたい場合は、文字をこのようなタグで囲うと中央に寄ります。

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

テーブルの装飾をする

セルの中で強調したい部分は、背景の色を変えたり、文字の色を変えたいですよね。

では任意の所の色を変えてみましょう。

このように色を変えるにはCSSを記述していきましょう。

CSSを変更する場所は、「管理画面」→「TablePress」→「プラグインのオプション」→「カスタムCSS」

画面上部に「プラグインのオプション」のタブがありますので、そこで出てくるスペースにCSSを記述していきます。

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

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

見出し部分も1列目に含まれるので注意してくださいね。
背景色を変えたいなら、background-color: #ffe5e5;このような記述をしてください。
文字色なら、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%; /* テーブル幅の指定 */ }

色々変更してキレイにしていくのは楽しいですね。
見やすい表を作って読みやすい記事にしていきましょう。