WordPressは、投稿画面のエディタ（ブロック＆ビジュアル）でテーブル（table）が作成できます。
ただ、複雑なテーブルをつくろうとすると、CSSを指定しないといけないので逆に手順がややこしくなるように感じるんですよね。例えば、横スクロールしたりなど。
実際に記事を書いていると、手書きでコードを書いたほうがわかりやすくて早いと感じることも多いです。というわけで、この記事では当ブログでもよく使用しているテーブルを自身のメモ代わりとしてコード例を紹介します。
WordPressのブロックエディタでテーブルを作成する方法はこちらでも解説しています。
WordPressの記事の中でテーブル表（table）を作るには、WordPressのデフォルトエディタである「グーテンベルク」や「ビジュアルエディタ」でできます。 他にはプラグインを使って作成する方法もあります。テーブル作成用のWordPressプラグインで有名なのは「TablePress」...
テーブル例
コピペで使えますが、テーマによっては見え方（デザイン）が違ってきますので、都度調整してください。
1行目を見出しにする
| 1 | ||
|---|---|---|
| 2 | 3 | 4 |
コード例：
<table>
<thead>
<tr>
<th colspan="3">1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>- ポイント
- theadは見出し、colspanは横セルの統合を意味しています。colspanには統合するセル数を表記しましょう。ここでは3つのセルを統合しているので、3としています。
横幅を調整
| 1 | 2 |
| 3 | 4 |
コード例：
<table>
<tr>
<td style="width: 30%;">1</td>
<td style="width: 70%;">2</td>
</tr>
<tr>
<td style="width: 30%;">3</td>
<td style="width: 70%;">4</td>
</tr>
</table>- ポイント
- widthで横幅を指定します。
背景色を設定
| 1 | 2 |
| 3 | 4 |
コード例：
<table>
<tr>
<td style="width: 30%; background-color:#fafafa;">1</td>
<td style="width: 70%;">2</td>
</tr>
<tr>
<td style="width: 30%; background-color:#fafafa;">3</td>
<td style="width: 70%;">4</td>
</tr>
</table>- ポイント
- 背景色はbackground-colorで指定します。#fafafaはカラーコードです。カラーコードはこちらのサイトを参考にしてください。
文字を上下・左右に中央寄せ
文字の中央寄せ。まずは横の中央寄せから。
| 1 | 2 | 3 |
| 4 | 5 | 6 |
コード例：
<table style="text-align:center;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>- ポイント
- text-align:center; で横に中央寄せにします。一部のセルだけ中央寄せにしたい場合は、<td style="text-align:center;"></td>とtdに対してスタイルを指定します。
次は縦に中央寄せ。左のセルのみ、上下の中央に表示しています。
| 1 | 2 3 4 |
コード例：
<table>
<tr>
<td style="vertical-align: middle;">1</td>
<td>2
3
4</td>
</tr>
</table>- ポイント
- vertical-align: middle; で縦に中央寄せにします。
枠線を太くする
一部の枠線（border）の太さを変更します。これはWordPressのエディタでも変更可能です。
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
コード例：
<table>
<tr style="border-bottom:solid 2px;">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>- ポイント
- 1行目の枠線の下をborder-bottomで記述しています。枠線の上はborder-bottom、右はborder-right、左はborder-leftで指定できます。
セルを横に統合
| 1 | 2 | 3 |
| 4 | 5 | |
| 6 | 7 | 8 |
コード例：
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>- ポイント
- colspanでセルを統合しています。数字の「2」は統合するセル数です。
セルを縦に統合
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 |
コード例：
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td rowspan="2">5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>- ポイント
- rowspanでセルを統合しています。数字の「2」は統合するセル数です。
横スクロール
テーブルを横スクロールに対応します。スマホだと縦に長くなりがちなテーブルも横スクロールで解決しますね。
| HORIZON | Ankle | TENJIKU | |
| 価格 | 33,800円 | 19,800円 | 33,800円 |
| 特徴 | 横スクロール型のコーポレートサイト | WooCommerce対応のネットショップ | ラグジュアリーな中華レストランのWebサイト |
コード例：
<div style="overflow: auto; white-space: nowrap;">
<table>
<tr>
<td></td>
<td>HORIZON</td>
<td>Ankle</td>
<td>TENJIKU</td>
</tr>
<tr>
<td>価格</td>
<td>33,800円</td>
<td>19,800円</td>
<td>33,800円</td>
</tr>
<tr>
<td>特徴</td>
<td>横スクロール型のコーポレートサイト</td>
<td>WooCommerce対応のネットショップ</td>
<td>ラグジュアリーな中華レストランのWebサイト</td>
</tr>
</table>
</div>- ポイント
- overflow: auto;は、子要素がはみ出した場合にスクロールさせる記述で、white-space: nowrap;は、テキストを自動的に改行させないための記述です。
英単語の自動改行を解除
領域が限られているテーブルで、英単語が自動改行されると見づらくなってしまいます。特にURLが中途半端な位置で改行されてしまうと、テーブル内に余計な空白ができて、気になってしまいます。そんなときは、英単語の自動改行を解除します。
| 1 | 2 | 英単語の自動改行をword-breakで防ぎます。 | 4 |
コード例：
<table>
<tr>
<td style="width:25%;">1</td>
<td style="width:25%;">2</td>
<td style="word-break: break-all; width:25%;">英単語の自動改行をword-breakで防ぎます。</td>
<td style="width:25%;">4</td>
</tr>
</table>- ポイント
- word-break: break-all;を入れておくと、英単語が自動改行されずに済みます。
テーブルは記事を読みやすくするアイテム
テーブルの本質は、情報の整理にあります。テーブルは情報を視覚的に整理できるので、それだけで文章が読みやすくなるのです。
読みやすい記事は、ユーザーからの評価も高くなるため、結果として検索エンジン対策にもつながります。テーブルを上手に活用することは、ブログ運営ではとても重要になります。
そんなテーブルをもっと活用しようということで本記事を書きました。
コメント