WordPressなどのブログ・サイトで自身で表(table)を作りたい、さらにセルを追加、よこ1行・たて1列追加をしたい初心者向けに、tebleで使うタグを自由に使えるよう説明します。
tableタグのHTMLの書きかたをチェックしてセルの追加時、どこにどんなタグを追加すれば良いかチェックしてください。
HTMLタグって何か知らない人用リンクを❦
LINKHTMLとは!HTMLタグとCSSのセレクタの関係、1人でカスタマイズできる為の近道
順番に見ればtableが理解できるようになりますが、目次を見て必要箇所をチェックしてください。

記事内コードをコピペする時、テキスト:HTMLにペーストしてね❦
table(表)の作り方、HTMLタグを説明
キャプション(表の内容を表示するタイトル)をつけ、左に見出しを作ったバージョンのHTMLの書きかたを紹介します。
以下table(表)はtableタグ内にタイトル(caption)と、項目(セル内に文字)を入れたものです。
th:項目の見出し | td:項目 |
---|---|
th:項目見出し2 | td:項目 |
このテーブルで使うタグは、tableタグの中にcaption・th・tdタグなど…複数のタグが入っています。
tableの構造をチェックし理解が深まったあと、自分でtableを作れるよう説明しますね❦
tableタグは『表すべて』を囲むHTMLタグ

表を全体を囲む、tableタグ
上記tableのHTMLをチェックしてみると、以下のとおり。
<table class="sample-1">
<caption>caption:表の内容:タイトル</caption>
<tbody>
<tr>
<th>th:項目の見出し</th><td>td:項目</td>
</tr>
<tr>
<th>th:項目見出し2</th><td>td:項目</td>
</tr>
</tbody>
</table>
- tableタグは、table(表)を作るとき必須のタグ。
- 赤文字のtableタグが全てのテーブルの内容を囲んでいるのが特徴
- 1つのテーブルに1つだけtableタグがある。
※1行目。tableタグ内にclass属性 class=”sample-1″ と付けてるのはこのテーブルのみ装飾する為。
<table class="sample-1"> <caption>caption:表の内容:タイトル</caption> <tbody> <tr> <th>th:項目の見出し</th> <td>td:項目</td> </tr> <tr> <th>th:項目見出し2</th> <td>td:項目</td> </tr> </tbody> </table>

HTMLと画像を比較しチェック❦
茶色のコードはtableの構造で、コードの並びで、画像のような表が出来てます。HTMLは早々にコピペしたい人用です。
WordPressのビジュアルではなく『テキスト:HTML』に貼り付け、セルの文字列をご自由に変更しご利用ください。
table(表)に説明(キャプション)をつけたい

タイトルの文字列を出力

タイトルの文字をcaptionタグで囲めばOK!
captionタグは、表の説明:内容を入れたいときタイトル部分を囲むタグ:なくてもOK❦です。
実際のHTML。
<table class="sample-1">
<caption>caption:表の内容:タイトル</caption>
<tbody>
<tr>
<th>th:項目の見出し</th><td>td:項目</td>
</tr>
<tr>
<th>th:項目見出し2</th><td>td:項目</td>
</tr>
</tbody>
</table>
tableタグとtbodyの間にcaptionタグ入れて、表の内容・タイトルを書けばOK!
またスッキリしたtableにしたい時は、キャプションなしでもOK❦
<thead>table(表)のうえに付けるタグ</thead>
もありますが、ココでは割愛します。tableのセル(表のボディ)全体を表す:tbodyタグ

テーブルの本体部分:tbody
tbodyタグはキャプションは含まず、表のセル達ぜんぶを囲むタグ。画像の赤線で囲った部分のこと。このタグがあれば構造が伝わりやすいとされる。※なくても反映するタグ❦
tbodyタグ内、ピンク色になっているセルに入れる項目(文字列)が入るのをHTMLでチェックすれば、分かりやすいですよ。
<table class="sample-1">
<caption>caption:表の内容:タイトル</caption>
<tbody>
<tr>
<th>th:項目の見出し</th><td>td:項目</td>
</tr>
<tr>
<th>th:項目見出し2</th><td>td:項目</td>
</tr>
</tbody>
</table>
- tbodyタグは、セルに書いたタグ達を囲むテーブル(表)のボディにあたるタグ
- tableに囲まれたtbodyは表の本体
- 次の項目、trタグ達を囲むタグである
tableの横1行の全セルを囲む:trタグ

表の横1行を、すべて囲むtrタグ
前述tbdyタグに囲まれたtable(表)をHTMLで見るとtrタグに囲まれたセルの文字列『th:項目の見出し』と『td:項目』が入っています。

trタグの特徴:ヨコ1行の項目すべて囲む
- trタグはTableのRow(行)、横1行すべての要素(項目)を囲むタグ

例えば2行あっても、1行ずつtrタグで囲む
画像のように1行ごとにtrタグに囲まれているのをHTMLでチェック!
<table class="sample-1">
<caption>caption:表の内容:タイトル</caption>
<tbody>
<tr>
<th>th:項目の見出し</th> <td>td:項目</td>
</tr>
<tr>
<th>th:項目見出し2</th> <td>td:項目</td>
</tr>
</tbody>
</table>
- trタグはtable内で複数つかえる。
- trタグに囲まれた後述のth・tdタグを入れないと反映しない❦
tableのセルに『項目のタイトル(見出し)』を作る:thタグ

ヨコ1行を指定するtrタグに囲まれたthタグ
テーブルのセル内に見出し・タイトルとして『項目の文字』を囲むセル、thタグ。用途に応じて使えば良いし、使わなくてもOK❦

ヨコ1列のtrタグと親子関係のthタグ
画像を説明すると以下のとおり。
<tr>
タグに囲まれた<th>
タグ:trの子要素<th>
タグは、セルにタイトルを付けたいとき使えばOK!
- セルの文字列を
<th>文字列</th>
で囲んだタグって事。
th:項目の見出し | td:項目 |
---|---|
th:項目見出し2 | td:項目 |
このようなtable(表)のHTMLは、以下のとおり。
<table class="sample-1">
<caption>セルの見出し:thタグの場所は赤字のセル</caption>
<tbody>
<tr>
<th>th:項目の見出し</th><td>td:項目</td>
</tr>
<tr>
<th>th:項目見出し2</th><td>td:項目</td>
</tr>
</tbody>
</table>
ヨコ1列のtrタグで囲むのは、見出しthタグと次に説明するtdタグ。
表のセルに入れる項目:tdタグ

ヨコ1行を指定するtrタグに囲まれたtdタグ
- tableのdataでtdタグ
- 表のデータ項目にあたる『セル』のこと
th:項目の見出し | td:項目 |
---|---|
th:項目見出し2 | td:項目 |
table(表)▲の赤文字がtdタグでセル内に『文字列』を書く感じ。
- HTMLを画像にした様子

親要素trに囲まれた子:hrタグ+tdタグ
HTMLで見ると▼赤文字のタグ部分
<table class="sample-1">
<caption>caption:表の内容:タイトル</caption>
<tbody>
<tr>
<th>th:項目の見出し</th><td>td:項目</td>
</tr>
<tr>
<th>th:項目見出し2</th><td>td:項目</td>
</tr>
</tbody>
</table>
<th>
タグ<td>
タグは、横一列を指定する<tr>
タグに囲まれる子要素<th>
タグと<td>
タグの違い- tableのセルのヘッダー
<th>
:見出しにあたる - tableのセルに書き込むデータ
<td>
:ただの項目
- tableのセルのヘッダー

見出し<th>
は通常左に1つで良いね!

ただの項目<td>
は必要な数だけ増やせばOKね❦

その通り!では…。どうやってセルを増やすか…?増やす方法は次をチェック!
右横にセルを1列ふやす!HTMLの書きかた
th:項目の見出し | td:項目 |
---|---|
th:項目見出し2 | td:項目 |
上のtableは縦・横2列です。右側に縦1行増やすには・・・。

trタグの子要素:tdタグを増やすと、右に1列…増えるよ
<tr>
タグに囲まれた<td>
タグを増やす- 縦横2列が、縦2列・横3列の表になる(ピンク色項目を追加)
表にすれば以下のとおり。
th:項目の見出し | td:項目 | td:項目 |
---|---|---|
th:項目見出し2 | td:項目 | td:項目 |
- 上の表をHTMLにしてみる
- 追加した場所はピンクの文字部分
<table class="sample-1">
<caption>右に項目をすべて増やす</caption>
<tbody>
<tr>
<th>th:項目の見出し</th><td>td:項目</td><td>td:項目</td>
</tr>
<tr>
<th>th:項目見出し2</th><td>td:項目</td><td>td:項目</td>
</tr>
</tbody>
</table>

HTMLと画像を合わせた右1列追加イメージ図❦
<td>td:項目</td>
を追記- trに囲まれたtdタグの後ろに付ければOK!
WordPressのエディタでHTMLで見ると、こんな感じ▼で縦に並ぶよ。インデントはないけどね❦
<tr>
<th>th:項目見出し2</th>
<td>td:項目</td>
<td>td:項目</td>
</tr>

全てのtrタグの子要素に<td></td>
を追加してね!
表のセルを一番下に1列、増やすHTMLの書きかた
作成したtableの一番下に1列増やしたいなど、記事を書く上でありますよね。
以下のtable(の表)通り、ピンク部分(表の下1列)を追加したいとか。
th:項目の見出し | td:項目 |
---|---|
th:項目見出し2 | td:項目 |
th:項目見出し2 | td:項目 |
tableタグ内で項目を縦列に増やしたいときヨコ1列を指定する<tr>
タグをマルっとコピペすればOKです!

tableタグを『表』にしたもの
1・2行目、文字列が入ったthとtdのセルを囲むtrタグ毎にコピー&ペーストして追加すればOK!ってワケで、それを画像で見ると以下のとおり。

trrタグの追加場所
</tr>
タグの下にコードを追加すれば、縦に2列だったのが3列に増えるワケです。
ヨコ1列増やすtr▼HTMLタグ
<tr>
<th>th:項目見出し2</th> <td>td:項目</td>
</tr>
上記をHTMLタグを入れる場所は、次に書いたコード</tr>
下。
<table class="sample-1">
<caption>caption:表の内容:タイトル</caption>
<tbody>
<tr>
<th>th:項目の見出し</th><td>td:項目</td>
</tr>
<tr>
<th>th:項目見出し2</th><td>td:項目</td>
</tr>
<tr>
<th>th:項目見出し2</th><td>td:項目</td>
</tr>
</tbody>
</table>

ピンク部分のHTMLコードが増えたってことね❦

<tr>
タグを2つから3つにすれば、タテ3行になるよ!

縦に項目を増やしたいとき、ヨコ1行の<tr>から</tr>までマルっとコピー&ペ―ストでOKだね❦
- trタグ一式(1つの
<tr>
から</tr>
まで全部)の1行を</tr>
タグのすぐ下に貼り付けるとタテ1列増やせる。 - trタグの数だけ、タテに項目が増える!
- 3・4・5行と増やすには
- trタグ(と中のth・tdタグ)を3つ・4つ・5つと増やせばOK!
ただしtrタグには子要素th・tdタグが入ってないと反映されない。
- 例えばtrタグに囲まれたセルの項目(th・tdタグ)が5個ある場合
- trタグに囲まれたth・tdタグを5個入れたら、レイアウトは崩れない
- 5コ必要なのに4コだと足りないから、凹っとなりレイアウトが崩れる
さいごに
tableタグはパッと見、複雑に見えますよね。1つずつ説明があれば初心者さんにも分かりやすいです。はじめは『ボンヤリ分かった!』からでしょうけど、コピペしながらでも書いてる内にドンドン分かってきます。
左サイドに項目の見出しを付けてコピペしたい場合のテンプレートは以下をどうぞ。
左に『住所』など項目タイトル、『店舗情報』というテーブルの説明(キャプション)つきtableテンプレート。
tableのstyle.cssスタイルについても書いてるのでどうぞ❦
まだまだ書きたい事があるけど、またの機会にtableの書きかたを紹介したいと思ってます。
それでは、かうたっくでした❦
Comments