WordPress個別サポート

WordPressでテーブル(表)を簡単に作成できるプラグインTablePressで作成したテーブルの例は次のようになります。

TablePressで作成した表

TablePressで作成した表

これでも問題はありませんが、細かい希望を言えば、個別の列の幅を設定したり文字の中央寄せなども設定できればと思うかもしれません。

通常の表であれば個別の列を設定するには

#tablepress-1 td:nth-child(2) {
    width:60px;
}

のようなCSSを記述する必要がありますが、TablePressで作成した表には次のように細かくclass名が付いているので便利です。

<table id="tablepress-1" class="tablepress tablepress-id-1">
<thead>
<tr class="row-1 odd">
    <th class="column-1"><div>講座名</div></th>
    <th class="column-2"><div>基本料金</div></th>
    <th class="column-3"><div>1時間延長した場合</div></th>
    <th class="column-4"><div>2時間延長した場合</div></th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="row-2 even">
    <td class="column-1">ホームページ作成講座</td>
    <td class="column-2">90分8,000円</td>
    <td class="column-3">14,000円(2時間30分)</td>
    <td class="column-4">20,000円(3時間30分)</td>
</tr>
<tr class="row-3 odd">
    <td class="column-1">WordPress個別サポート</td>
    <td class="column-2">60分6,000円</td>
    <td class="column-3">12,000円(2時間)</td>
    <td class="column-4">18,000円(3時間)</td>
</tr>
</tbody>
</table>

各テーブルにはテーブルID(TablePressメニューと連動)が付いています。列については「column-999」、行については「row-999」のようなclass名が付いています。また、偶数行、奇数行には「even」「odd」というclass名が付いているので1行ごとに独自の色を設定することもできます。

このような直感的なclass名を使って、たとえば「1列目の幅を100pxに」「2列目の幅を40pxに」は次のように記述することができます。

#tablepress-1 .column-1 {
    width:100px;
}

#tablepress-1 .column-2 {
    width:40px;
}

「.column-1」が1列目、「.column-2」が2列目を示しています。表示結果は次のようになります。

列幅を個別に設定した結果

列幅を個別に設定した結果

同じように1行目が「.row-1」、2行目が「.row-2」なので、特定のセルを指定するイメージでスタイルを変更することができます。

#tablepress-1 .row-2 .column-2 {
    background-color:#f6bfbc;
}

表示結果は次のようになります。

特定のセルのスタイルを変更する

特定のセルのスタイルを変更する

ついでですが、中央揃えにするには「text-align:center;」を使います。

#tablepress-1 .column-1 {
    width:160px;
    text-align:center;
}

表示結果は次のようになります。

セル内の文字を中央揃えにする

セル内の文字を中央揃えにする

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート