＜table＞＜tr＞＜td＞タグで表を作成する［ワードプレス表作成マニュアル］

ワードプレスにはいくつかの表の作成方法がありますが、<table>タグで表を作成し、好みのカスタマイズをする方法を項目別に解説していきます。

前回の記事と重複する部分がありますが、いつでも活用できるように、マニュアル形式で必要なことを簡潔にまとめているので参考にしてください。

表のTHML

まずはじめに、下の記述は３×３の表を表すTHMLテキストです。この記述をコピーして、テキスト画面にペースト（貼り付け）してから、ビジュアル画面で確認すると表が完成しています。（タグの説明は後述します）

このように表の完成です。（↓）文字が入っていないのでセルが細いですが、文字を入力すると程よい幅になります。

この表は、何も設定されていない状態の表なので自由なカスタマイズが可能です。

表を作成する際の注意事項

※HTMLで表を作成した後は、、、、、は使わないようにしましょう。

解説

表が出来上がり、表の罫線部分にカーソルをあてると、幅や高さを自動調整するマーク（や）が現れたり、また、セル内をクリックすると列を増減するためのアイコン（、、）が表示されたりしますが、これらのアイコンを使って表の幅や高さを変更すると、すべてのセルに高さや幅が自動挿入されてしまいます。

すべてのセルに幅や高さが指定されると、後からセルの幅をカスタマイズする際に思い通りに指定することができず、最終的にはすべてのセルから該当するプロバディや値をすべて手作業で削除するか、もしくは、初めから作り直したほうが早い場合が出てくる可能性があります。

せっかく作ったそれまでの労力を無駄にしたくはないですよね。

アイコンなどから編集できると直感的に作業ができるので、ラクに編集できるような感じがしますが、後々面倒なことになる可能性がとても高いです。これらのアイコンからセルの幅などを調整するのはやめたほうが無難です。

気づかないうちに触れてしまっていることもあるので注意してください。

それでは、使用するタグの説明を始めます。

table要素（<table>タグ）・・・表

table要素は、表を作成するときに必ず必要な要素です。表の始まりと終わりを<table>タグで囲んで表を作ります。どのような表にするのかは、別の要素（タグ）で指定します。

開始タグ

<table>

終了タグ

</table>

tr要素（<tr>タグ）・・・行

tr要素は、table要素の中に記述する「行」を表す要素です。一行ごとに<tr>タグで囲みます。

<table>
<tr></tr>
< /table>

必要な行だけtr要素を書き込みます。この例は、一行の表を表していますが表示されることはありません。

開始タグ

<tr>

終了タグ

</tr>

td要素（<td>タグ）・・・セル

td要素は、tr要素（行）の中に記述する「セル」を表す要素です。必要な数のセルをtr要素（行）の中に記述します。

<table>
<tr>
<td></td><td></td><td></td>
</tr>
< /table>

この例では、一行に３つのセルが入っています。複数の行の表を作成する場合は、行ごとのセルの数をすべて合わせてください。

セルの数を合わせる

【HTML】テキスト画面で表を作成する-初めの枠組み-

Excelで表を作成するときは、感覚的にレイアウトや表示を行うことができても、ワードプレスで同じことを行おうとすると、なかなかうまくいきません。 そこで、表の基礎から表の応用までを順を追って書き留めておくことにしました。 まずは、３[…]

開始タグ

<td>

終了タグ

</td>

まとめ

表を作成するには、<table＞タグで表を表し、<tr>タグで行を、<td>タグでセルを表すことで作成できます。

罫線などの設定をしなくても、罫線付きの表を作ることが可能です。（使用しているテーマやプラグインによっては、この限りではありません。この記事で使用しているテーマはTHE THORです）