WordPressでの表の書き方

はじめに

WordPress においてHTMLコードで表を入れるための書き方をまとめました。
WordPress に限らず、HTMLでブログを書くときにも使えます。

まずは項目の見出しに背景色を設定するためのCSSの記述を載せておきます。

th {background-color: #ccffff;}

これで<th>タグの背景色が水色になります。カラーコードは適宜変更してください。
<th>は１行目や左端列の見出しに使われます。何度も出てきて見づらくなるのでCSSに記述しました。もしCSSが使えない環境なら、<th>を次のように書き換えてください。

<th style="background-color: #ccffff;">

これから挙げていく各表のコードで「style=」に続いて書いている部分は、実際にはCSSに記述した方が良いと思います。今回は説明のためにほぼインラインスタイルで書いています。

それでは基本の表から見ていきましょう。実際の表を表示し、その下にHTMLコードを載せています。

デフォルトの表（2行×3列）

・HTML コード

<table>
<thead>
<tr>
<th></th>
<th>列項目1</th>
<th>列項目2</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<th>行項目1</th>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>

まずはデフォルト状態の単純な表を表示してみました。枠線も無く非常に見づらいです。
大きくは以下の3つの領域に分かれています。

• <thead></thead> … ヘッダー
• <tfoot></tfoot> … フッター
• <tbody></tbody> … ボディ

<tr>の中に行を書いていきます。項目の見出しは<th>で指定し、個々のセルは<td>で指定します。
<tbody>の中に<tr>を増やせば、行を追加できます。
ここではフッターを使用していませんが、記述する場合は上記のようにヘッダーとボディの間に置きます。

基本的な設定をした表

・HTML コード

<table align="center" border="1" cellpadding="3" width="80%" style="table-layout: fixed;">
<thead>
<tr>
<th width="20%"></th>
<th width="40%">列項目1</th>
<th width="40%">列項目2</th>
</tr>
</thead>
<tbody>
<tr>
<th>行項目1</th>
<td style="border-color: gray; color: red;">A</td>
<td>B</td>
</tr>
</tbody>
</table>

だいぶ表らしくなりました。<table>タグにいくつか設定をしています。

• align=”center” … 表の水平位置を中央にします。
• border=”1″ … 枠線の太さを指定します。
• cellpadding=”3″ … セルの枠線と文字との余白を指定します。
• width=”” … 幅を指定します。
• style=”table-layout: fixed;” … 表レイアウトを固定します。幅を指定するための設定です。

<table>の中の width は、ページに対する表全体の幅です。<th>の中の width は、表に対する列の幅です。高さは自動的に調整されます。

単純な表ならこの応用で書いていけると思います。

セルを結合した表

・HTML コード

<table align="center" border="1" cellpadding="3" width="80%" style="table-layout: fixed;">
<thead>
<tr>
<th rowspan="2" width="20%"></th>
<th colspan="2" width="40%">列項目1</th>
<th colspan="2" width="40%">列項目2</th>
</tr>
<tr>
<th>名称1</th>
<th>数値1</th>
<th>名称2</th>
<th>数値2</th>
</tr>
</thead>
</table>

見出しの部分だけ表示しています。セルを結合する方向によって2種類の記述があります。

• rowspan … 縦に結合
• colspan … 横に結合

数値で結合する数を指定できます。結合した先のセルの部分は記述しませんので、1行ずつ確認して間違いの無いようにしましょう。

セルに斜線を引いた表

・HTML コード

<table align="center" border="1" cellpadding="3" width="80%" style="table-layout: fixed;">
<thead>
<tr>
<th class="slash--down" width="20%"></th>
<th width="40%">列項目1</th>
<th width="40%">列項目2</th>
</tr>
</thead>
<tbody>
<tr>
<th>行項目1</th>
<td>A</td>
<td class="slash--up"></td>
</tr>
</tbody>
</table>

・CSS

.slash--up {background-image: linear-gradient(to top left, transparent, transparent 49%,
  gray 49%, gray 51%, transparent 51%, transparent);}

.slash--down {background-image: linear-gradient(to top right, transparent, transparent 49%,
  gray 49%, gray 51%, transparent 51%, transparent);}

設定部が長いのでCSSを使っています。
斜線といっても「線」を描いているのではありません。グラデーションを利用して擬似的に線を表現しています。「slash–up」は右上がり、「slash–down」は右下がりの斜線を表しています。
CSSの「49%」と「51%」の部分の差は 2% であり、これが斜線の太さになります。差を大きくすれば線が太く見えます。
「gray」の部分を変更すれば色も決められます。

これで表の書き方は以上です。WordPress には表プラグインもありますので上手く活用しましょう。