6月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
5月受入枠は満員となっております。6月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい

上記にあてはまる方は、ぜひご検討ください!

みなさんはHTMLの学習をしていませんか?

今回の記事では<table>タグの使い方や注意点について紹介していきます!

テーブル(表)を作成する

table 要素はテーブル(表)を作成するタグです。tableタグ自体は、表の大枠を示す要素です。この要素内には、表を構成する各要素を配置していくことになります。

テーブル(表)の基本的な構造は、 <table>~</table>内に<tr>~</tr>で表の一行を定義していきます。1行毎には、<TH>~</TH>や <TD>~</TD>でセルを定義します。th 要素は、ヘッダセル、 td 要素は、データを定義するデータセルとなっています。ヘッダセル内のテキストは、一般的なブラウザでは太字でセンタリングされて表示されます。

このテーブル(表)をレイアウト目的で使用するケースがありますが、 本来はテーブル(表)を作成するためのタグで、レイアウトはスタイルシートで調整することになります。

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

指定できる属性

1. summary

表の目的と構造に関する説明文を記載します。

2. width

表全体の幅を、ピクセル数または画面サイズに対するパーセントで指定します。

3. border

外枠線の太さをピクセル数で指定します。

4. frame

外枠線の表示方法を指定します。

void :外枠なし (初期値)
lhs :左のみ表示
rhs :右のみ表示
vsides :左右のみ表示
above :上のみ表示
below :下のみ表示
hsides :上下のみ表示
box :全ての外枠を表示
border :全ての外枠を表示

5. rules

内罫線の表示方法を指定します。

none :罫線なし (初期値)
rows :横罫線のみ表示
cols :縦罫線のみ表示
groups :グループ間の罫線のみ表示
all :全ての罫線を表示

6. cellspacing

セルの間隔を、ピクセル数または画面サイズに対するパーセントで指定します。

7. cellpadding

セル内の余白を、ピクセル数または画面サイズに対するパーセントで指定します。

8. hspace

表の周囲の左右の余白を指定を、ピクセル数で指定します。

9. vspace

表の周囲の上下の余白を指定を、ピクセル数で指定します。

構成順序

表を構成する各要素については、以下の順序で配置する必要があります。

1. table開始タグ

2. タイトル部分:caption要素

3. 列指定 :colgroup要素 または col要素

4. ヘッダ部分 :thead要素(配下にtr,th要素)

5. フッタ部分 :tfoot要素(配下にtr,td要素)

6. 本体部分 :tbody要素(配下にtr,td要素)

7. table終了タグ

上記のように、記述の順序としてはtbody要素を最後に配置することになります。しかし、これらの要素に対応しているブラウザでは、「ヘッダ部分 → 本体部分 → フッタ部分」の順序で表示されます。

・HTMLのコーディングの概要をまとめてみたので、

HTMLのコーディングの仕方を解説を参考にしてみてください。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>[TEST]tableタグ</title>
</head>
<body>
<table border="3">
<caption>本日の買い物</caption>
<thead>
<tr>
<th>品目</th>
<th>購入数</th>
<th>支払額</th>
</tr>
</thead>

<tfoot>
<tr>
<th>合計</th>
<td>37</td>
<td>8,365円</td>
</tr>
</tfoot>

<tbody>
<tr>
<th>A商店</th>
<th></th>
<th></th>
</tr>
<tr>
<td>生鮮食品</td>
<td>14</td>
<td>3,825円</td>
</tr>
<tr>
<td>雑貨</td>
<td>10</td>
<td>1,000円</td>
</tr>
</tbody>

<tbody>
<tr>
<th>Bスーパー</th>
<th></th>
<th></th>
</tr>
<tr>
<td>惣菜</td>
<td>5</td>
<td>1,340円</td>
</tr>
<tr>
<td>その他</td>
<td>8</td>
<td>2,200円</td>
</tr>
</tbody>
</table>

</body>
</html>
</body>
</html>

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

まとめ

初心者の方向けにtableタグを紹介していきましたが、いかがでしたか?

headタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね!

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

6月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
5月受入枠は満員となっております。6月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい

上記にあてはまる方は、ぜひご検討ください!


▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら!

おすすめの記事