WordPressテーマ変更!SimplicityからCocoonへ
スポンサーリンク

table:表の作りかた!行・列を増やすHTMLタグの書きかた、初心者向けだよ❦

WordPressなどのブログ・サイトで自身で表(table)を作りたい、さらにセルを追加よこ1行・たて1列追加をしたい初心者向けに、tebleで使うタグを自由に使えるよう説明します。

tableタグのHTMLの書きかたをチェックしてセルの追加時、どこにどんなタグを追加すれば良いかチェックしてください。

HTMLタグって何か知らない人用リンクを❦

LINKHTMLとは!HTMLタグとCSSのセレクタの関係、1人でカスタマイズできる為の近道

順番に見ればtableが理解できるようになりますが、目次を見て必要箇所をチェックしてください。

かうたっく
かうたっく

記事内コードをコピペする時、テキスト:HTMLにペーストしてね❦

スポンサーリンク

table(表)の作り方、HTMLタグを説明

キャプション(表の内容を表示するタイトル)をつけ、左に見出しを作ったバージョンのHTMLの書きかたを紹介します。

以下table(表)はtableタグ内タイトル(caption)と、項目(セル内に文字)を入れたものです。

caption:表の内容:タイトル
th:項目の見出し td:項目
th:項目見出し2 td:項目

このテーブルで使うタグは、tableタグの中にcaptionthtdタグなど…複数のタグが入っています。

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

またcaptionタグ以外にtheadタグ<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タグはTableRow(行)横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タグの場所は赤字のセル
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タグ
    • 表のデータ項目にあたるセル』のこと
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>:ただの項目
説明ぼうや
説明ぼうや

見出し<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列)を追加したいとか。

縦方向の下に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スタイルについても書いてるのでどうぞ❦

LINKブログのレビュー記事で『店舗情報』を見やすくカスタマイ

まだまだ書きたい事があるけど、またの機会にtableの書きかたを紹介したいと思ってます。

それでは、かうたっくでした❦

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
HTMLとCSSの基本
フォローする
スポンサーリンク
スポンサーリンク
ビバ★りずむ

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る
タイトルとURLをコピーしました