9月
16

HTMLテーブルタグの概要。テーブルはレイアウトには使わないように。<table>

料金表やメニュー表など、テーブルを使えば表をきれいに見やすく表示できます。
テーブル要素にはその中にヘッダ要素やフッタ要素なども定義されているので、
きちんと使えると検索エンジンにも読みやすいページとなります。
縦や横に要素を並べることができるため、昔からページのレイアウトなどに使われることも多いですが、
レイアウトはCSSに任せて、あくまでテーブル(表)として利用するようにしてください。
なんてったって、テーブルは表を作るには非常に便利ですから。



テーブルタグの組み方の概要

テーブルタグは意外と複雑ですが、
きちんと理解するとそう難しいものではありません。
テーブルの組み方の概要を3ステップで理解しておきましょう。

1.テーブルの範囲を指定する

まずはテーブルの範囲を指定します。
このとき、中には何も入っていません。
あくまでテーブル要素の範囲を指定するだけです。
テーブルの領域
まずはテーブルの領域を指定する。テーブルタグ(1/3)。<table>

2.テーブルの行を指定する

テーブルには行と列があります。
まずは行を指定することから始めます
行を指定すると次のようなイメージになります。
ここでも、まだテーブルは完成していません。
1行目
2行目
3行目
4行目
5行目
テーブルに行を定義して挿入する。HTMLテーブルタグ(2/3)。<tr>

3.行をセルに分けて入力できる箱を作る

先ほど分けた行それぞれに対して各部屋の区切りを作って実際に表の中身を入れるセルを作ります。
基本的には表は縦横が揃っている必要があるので、セルも各行同じ数にそろえる必要があります。
(表はパソコンソフトのエクセルをイメージしてください)
部屋1 部屋2 部屋3
部屋4 部屋5 部屋6
部屋7 部屋8 部屋9
部屋10 部屋11 部屋12
部屋13 部屋14 部屋15
テーブルにセルを定義してテキストや画像の要素を入れられるようにする。HTMLテーブルタグ(3/3)。<td>

基本的にはこの3ステップで表を作っていくことになります。
慣れれば簡単です、この3ステップを忘れないようにしてください。

3 Comments to “HTMLテーブルタグの概要。テーブルはレイアウトには使わないように。<table>”

Leave a comment

↓サーバーを借りるなら↓
サーバーについてはこちら


↓ドメインをとるなら↓
ドメインについてはこちら

↓ネットショップを始めるなら↓

人気の記事