WordPressでの表の書き方

はじめに

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

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


th {background-color: #ccffff;}

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


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

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

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


デフォルトの表(2行×3列)

列項目1 列項目2
行項目1 A B

・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>を増やせば、行を追加できます。
ここではフッターを使用していませんが、記述する場合は上記のようにヘッダーとボディの間に置きます。


基本的な設定をした表

列項目1 列項目2
行項目1 A B

・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 は、表に対する列の幅です。高さは自動的に調整されます。

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


セルを結合した表

列項目1 列項目2
名称1 数値1 名称2 数値2

・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行ずつ確認して間違いの無いようにしましょう。


セルに斜線を引いた表

列項目1 列項目2
行項目1 A

・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 には表プラグインもありますので上手く活用しましょう。

Leave a comment

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

three × two =