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

2020-08-08
2020-08-28
ワードプレス

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

まずは、３×３の表の作り方から。

1 表作成の基礎（HTMLテキストで書く）
2 表の中の見出し
- 2.1 ①1行目の表見出し（th要素）
- 2.2 ②1列目の見出し（th要素）
3 表作成時の注意点
4 まとめ

表作成の基礎（HTMLテキストで書く）

ワードプレスでシンプルに３×３の表を作ります。
HTMLテキストで記述する場合でも、4つの要素を覚えてしまえば簡単です。

① table要素（<table>～</table>）

table要素（<table></table>）を書きます。

「表ですよ」ということを記述しました。
※まだ表示はされません

② tr要素（<tr>～</tr>）

table要素（<table></table>）の中に、tr要素（<tr></tr>）で行を3行作成します。

表の中に行が作成されました。

※この状態でも、まだ表示はされません。
「テキスト画面」に入力しても、
「ビジュアル画面」に戻ると、入力したものが消えてしまいます。

③ td要素（<td>～</td>）

tr要素（<tr></tr>）で作った行の中に、td要素（<td></td>）を3つずつ書き込み、セルを作成します。

表の中にセルが作成されました。

※この状態で初めて「ビジュアル画面」で表示されるようになります。
（使っているテーマやプラグインによっては、罫線が無かったり表示が異なることがあります。この記事で使用しているテーマはTHE THORです）

その他：tbody要素（<tbody>～</tbody>）

上記の記述を「テキスト画面」で入力し、「ビジュアル画面」で確認すると表が作成されますが、再び「テキスト画面」に戻りHTMLの記述を確認してみると、自動で追加された要素を確認することができます。

表が表示されている状態です。

※tbody要素については、別記事を参照してください。【】

表の中の見出し

シンプルな３×３の表が完成したので、次は、その表に見出しを付けます。

①1行目の表見出し（th要素）

1行目のセルが「見出しセル」になりました。

※見出しセルの色が変更されています（使っているテーマやプラグインによっては、表示が異なることがあります。この記事で使用しているテーマはTHE THORです）

②1列目の見出し（th要素）

1列目のセルが「見出しセル」になりました。

表作成時の注意点

表の枠組みを作成するとき、コピーペーストを使うこともあるかと思いますが、各行のセルの数は必ず統一するようにしてください。

1番上の行のセルが1つ右側に飛び出し、一番下の行はセルが2つしかありません。
※１行目のセルは<td></td>が1つ多く、3行目のセルは<td></td>が1つ足りません。

まとめ

表を作る際、HTMLテキストで直接表を作成することができます。

table要素・・・（表の作成）・・・開始タグ<table>、終了タグ</table>
tr要素・・・（行の作成）・・・開始タグ<tr>、終了タグ</tr>
td要素・・・（セルの作成）・・・開始タグ<td>、終了タグ</td>
th要素・・・（表の見出し）・・・開始タグ<th>、衆力タグ</th>

※セルの数が不揃いにならないように、行に含むセルの数は表内で統一させましょう。