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・４・５行と増やすには
- 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