ホームページに会社概要や価格表、ショッピングサイトなら商品の詳細欄など「表」を作ることがあります。その際に利用するHTMLがテーブルタグです。少し取っ付きにくいかもしれませんがテーブルタグは使うことが多いので紹介します。
こんにちは！あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を２年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。
もくじ価格表などを作成する方法！テーブルタグを使いこなそう。
表を作るテーブルタグか〜
ホームページ作成には必要そうね！
テーブルタグとは？
| タグ | 意味 |
|---|---|
| table | テーブルの大枠であり、本体を作成するためのタグ。 |
| caption | テーブルのタイトルを作成する役割。ルールとして<table>の開始タグ直後だけ記述できる。 |
| th | 見出しを作成する役割。<tr>タグの中に記述できる。 見出しはブラウザでセル内の中央に太字で表示されます。 |
| tr | 行を作成する役割。 |
| td | セルを作成する。<tr>タグの中に記述できる。 |
※ 上記の表もテーブルタグで構成しています。色調はCSSで装飾しています。
テーブルタグとはWEBサイトで「表」を作成したい時に利用します。分かりやすい例として価格表や商品の詳細などでよく使われます。
上記で紹介している要素がテーブルを構成するタグです。文章だけではとても分かりづらいと思いますので、分かりやすく説明していきます。
サンプル価格表
サンプル価格表をテーブルタグの記述で作りました。
以下のように表現できます。枠組みもテーブルタグで構成します。
※ デザイン要素であるCSSで少し見栄えをよくしています。
| 苺のショートケーキ | |
|---|---|
| 生地とやわらかなムースがとろける食感！苺が絶妙なハーモニー♪ 全国スイーツお菓子人気ランキングで１位に輝きました！ | |
| 価格 | 680円（税別） |
| 数量限定 | 有 |
 | |
テーブルタグはこのような表を作るために使います。では記述がどうのように構成しているのか確認してみましょう。
| <table> <caption>サンプル価格表</caption> <tr> <th colspan="2">苺のショートケーキ</th> </tr> <tr> <td colspan="2">生地とやわらかなムースがとろける食感！苺が絶妙なハーモニー♪<br> 全国スイーツお菓子人気ランキングで１位に輝きました！ </td> </tr> <tr> <td >価格</td> <td >680円（税別）</td> </tr> <tr> <td>数量限定</td> <td>有</td> </tr> <tr> <td colspan="2"><img src="images/itigo.png" alt="苺のショートケーキ"> </td> </tr> </table> |
大枠を担うtableタグ
それでは、先程の「サンプル価格表」で説明します。
上の図を見ていただくと、ブルーで表記した大枠のボーダー線があります。そこがtableタグになります。
tableのタイトルと見出し
tableのタイトルはcaptionタグで表記します。captionタグは必須ではありませんので使わない場合も多いです。
thタグは見出しを記述するタグです。フォントサイズが少し太めになります。
行を担うtrタグとセルのtdタグ
テーブルの中に行を作る要素が「tr」タグです。<tr>で始まり</tr>閉じると一つの行になります。
そして、行の中にセルを作るのが「td」の役目です。文字を書く時には<td>と</td>間に書きます。
記述と見比べてみよう
| 苺のショートケーキ | |
|---|---|
| 生地とやわらかなムースがとろける食感！苺が絶妙なハーモニー♪ 全国スイーツお菓子人気ランキングで１位に輝きました！ | |
| 価格 | 680円（税別） |
| 数量限定 | 有 |
| |
| <table> <caption>サンプル価格表</caption> <tr> <th colspan="2">苺のショートケーキ</th> </tr> <tr> <td colspan="2">生地とやわらかなムースがとろける食感！苺が絶妙なハーモニー♪<br> 全国スイーツお菓子人気ランキングで１位に輝きました！ </td> </tr> <tr> <td >価格</td> <td >680円（税別）</td> </tr> <tr> <td>数量限定</td> <td>有</td> </tr> <tr> <td colspan="2"><img src="images/itigo.png" alt="苺のショートケーキ"> </td> </tr> </table> |
まず、tableの大枠があり、その中に「tr」タグがあります。分かりやすいように「tr」には色を付けました。サンプル価格表には５行あります。ですので<tr>から</tr>までの記述が５回あります。
<caption>サンプル価格表</caption>
<caption>サンプル価格表</caption>はタイトルの記述で開始と終了タグがあります。必須のタグではないので必要な場合は記述しましょう。
<th colspan=”2″>苺のショートケーキ</th>
thは見出しを作るタグでこちらも開始タグと修了タグがあります。
<th colspan=”2″> ← ここに注目すると、colspanという記述が追加されています。
colspanは「この行でセル２つ分の領域を使用します」という意味になります。
<td colspan=”2″>生地とやわらかな…</td>
tdはセルの領域です。こちらもcolspanの影響でセルが２つ分の領域になります。
価格や数量限定では「tr」の中に「td」を２つ記述することによりセルの区切りができています。
サンプル価格表２
| 種類 | 価格 | 在庫 |
|---|---|---|
| 苺のクリスマスケーキ | 3,800円（税別） | ２０個 |
| スフレチーズケーキ （クリスマス） | 3,500円（税別） | １５個 |
| <table> <tr> <th>種類</th> <th>価格</th> <th>在庫</th> </tr> <tr> <td>苺のクリスマスケーキ</td> <td>3,800円（税別）</td> <td>２０個</td> </tr> <tr> <td>スフレチーズケーキ<br>（クリスマス）</td> <td>3,500円（税別）</td> <td>１５個</td> </tr> </table> |
今回の表は３行なので「tr」も３回記述します。1行目は見出しになりますので「th」を３つ記述します。２行目と３行目は「td」をそれぞれ３つ記述することになります。
まとめ
ホームページを作成する際にはtableタグは必ずと言っていいほど利用します。コピー＆ペーストをうまく活用することも作業効率を高めるコツになります！
テーブルタグもデザイン要素であるCSSを活用して見た目を整えます。HTMLだけの要素で作成するとデザインはそっけない雰囲気になります。HTMLの基礎があってのCSSなので、まずはHTMLをしっかりとマスターしましょう。