【ワードプレス】表アイコンからtableを作る

ワードプレスで表を作るには、HTMLテキストで「table要素、tr要素、td要素、th要素を直接書く」ことによりで表の枠組みを作ることができますが、その他にもいくつかの表作成の方法があります。

この記事では、ワードプレスの表アイコン（）から表を作成する方法を解説しています。

※テーマによっては表作成のアイコンがなく、表作成ができない場合があります。その場合は、プラグインを導入するか表作成がデフォルトで入っているテーマを使うことにより、簡単に表作成ができるようになります。（この記事で使用しているテーマは【THE THOR（ザ・トール）】です）

ワードプレスの表作成アイコンを使って表を作成する

ワードプレスの表アイコンから、シンプルな３×３の表を作ります。

１．表のアイコンをクリックする

赤丸のアイコンをクリックしてください。
このマークは、「表のアイコン」です。
「表を作成」したり「表の設定」をすることができます。

２．「３×３の表」を作成する

上の画像のように順を追って行うだけで、３×３の表が完成します。

1.  表のアイコン（）をクリックすると選択窓が出ます。
2.  一番上の［テーブル］欄にカーソルを合わせると、右側にさらに窓が出ます。
3.  そのままカーソルを右に動かして、作りたいセルの数までカーソルを移動します。
   縦3マス、横3マスが青くなっていることを確認してクリックすると、投稿画面に表が表示されます。

表アイコンで作成した表

表アイコンを使って3×3で表を作ると、HTMLテキストで直接表を作成した時と同じ表が出来上がります。
しかし、HTMLテキスト欄で確認してみると、記述が異なっていることが分かります。

HTMLテキスト欄の記述の違い

テキスト欄に直接記入して表を作成した場合と、ワードプレスの編集画面から表アイコン（）を使って表を作成した場合とでは、表の記述が異なります。

ワードプレスで作成した場合は、表の設定が自動的に挿入されています。

table要素（表）には、「border-collapse: collapse」、「 width: 100%」、「 border=”1″」というスタイルが設定されていて、すべてのtd要素（セル）には、「width: 33.3333%」というスタイルが設定されています。

style属性

<table>タグ内に記述されているstyle属性は、table要素（<table>タグ）の属性として指定されている、スタイルを指定するための記述です。

style=”プロパティ名: 値”

という形で指定されています。

【スタイル属性】

border-collapseプロパティ

border-collapseプロパティは、セルごとに引かれている線をどのように表示するかを指定するプロパティです。

ワードプレスの表アイコンから表を作成すると、border-collapseプロパティに collapseという値が指定されています。

初期値（デフォルト）はseparateという値で、すべてのセルを罫線が囲うため、表全体を見ると二重線の表に見えますが、collapseという値を指定するとその二重線が1本にまとまった線になり、表を見やすくすることができるのです。

このcollapseの指定は、ほとんどの表で指定されていて、初期値の二重線の表を見ることはあまりありません。

widthプロパティ

widthプロパティは、幅を指定するプロパティです。

<table>タグには100%の値が指定され、<td>タグには33.3333%という値が指定されています。
これは、表を表示幅いっぱいに表示し、セルは均等に分けますよ。という指定です。

このような指定が初めから入力されています。

【widthプロパティ】

border属性

table要素内にあるborder属性は、この表が「レイアウト目的ではないよ」ということを示す記述です。

<table>タグには「1」という値が初めから指定されていて、レイアウト目的ではないことを表示してくれています。

【border属性】

まとめ

ワードプレスの表アイコン（）から表を作成するとHTMLテキストを記述することなく簡単に表を作成することができますが、幅（widthプロパティ）が初めから指定されていることで、後からのカスタマイズがしにくくなる可能性があります。

「均等の表を作成したい」「レスポンシブ対応の表にしたい」場合には、表アイコン（）からの表作成がおすすめです。