本来テーブルは表を作成するタグですが、一昔前まではレイアウト目的に使われることが非常に多かったのです。
今でこそスタイルシートに移行しつつありますが、まだまだテーブルレイアウトのサイトは多いのが現状です。
テーブルレイアウトの利点は、ページ全体をきれいに並べることができるところにあります。
また、ブラウザ間の解釈をそれほど気にする必要がなく、レイアウトが崩れにくいのが特徴です。
基本的にサイトのレイアウトは、テーブルかスタイルシートかのどちらかになります。
ただ、欠点はソースがものすごく複雑になってしまいます・・・。修正するときなんか、どこがどこだかわかりづらくなるし、構造上、ページを読み込む時間が若干長くなります。
またスタイルシートと違い、微妙な調整がしずらいというのがあります。
また、本来はテーブルを使ったレイアウトは、推奨されてはいないのです。
W3CというWeb標準の規格を定める機関が正式に勧告しています。
本来レイアウトはスタイルシートで行うべきとしています。
なので、これからホームページを作成する方は、スタイルシートでレイアウトを行いましょう。
スタイルシートも覚えれば難しくはないし、テーブルレイアウトではできないような微妙な調整も可能です。ソースもすっきりします。
そうは言っても、本来の表としての使用はもちろんOKですよ。
実際はこれだけでは表示されません。一般的な使い方は次のようなソースになります。
これを実際に表すと
ここは見出しになります |
---|
ここがセルといわれるところです |
となります。
<table>〜<table>は、この間がテーブルであることを表します。
tr は行を表します。<tr>〜</tr>の間が行です。横の一列という意味になります。
<th>〜</th> は見出しになります。初期値では、太字でセンタリングされて表示されます。
必ずしも使う必要はありません。
<td>〜</td> は一つのセルになります。ここに文字などを記述します。
これがメインのタグになるでしょう。
<caption>〜</caption>は表のタイトルになります。
初期値では枠線は表示されません。○のなかに数字を入れます。1なら、1ピクセルになります。
widthはテーブルの幅を指定します。単位は数字か%で指定します。100px なら100と入れます。%は親要素に対する割合で表示されます。
height は高さを指定します。実際はtable ではなく、td タグなどに使います。
指定方法は上のテーブルとまったく同じです。table を th や td にするだけです。
align で横方向の行揃えです。○には、left,center,right が入ります。指定なしはleftです。
valignで縦方向の指定です。○には、top(上)、middle(中央)、bottom(下)、baseline(横方向の文字のベースライン基準)があります。指定なしはmiddle です。
cellspacing はテーブルの外枠とセル、セルとセルの間隔を指定します。○には数字が入ります。単位はピクセルになります。
cellpadding はセルの枠とセル内の文字などの内容との間隔を指定します。こちらも○には数字が入ります。
通常表を作成すると枠線が2重になりますが、cellspacing="0" を指定することで枠線を一本にすることができます。
bordercolor は枠線の色を表します。通常の色の指定と同じで、色名を直接書き込むか、RGB値(例・ff00bf)で指定します。
bordercolorlight と bordercolordark は左側と上、右と下で色を分けて、立体的に表示できます。スペルが長いので、間違わないようにしましょう^^;てか、こっちは使う機会あるかな・・・・(汗)
tableなら全体に背景が表示され、tr,td,th,なら、それぞれの背景だけが表示されます。
○には画像のファイル名を入れます。ファイル名はすべて半角英数字(小文字)にしましょう。
指定されたセルから、指定された数の下方向にセルが連結します。
わかりにくいですね・・・^^; 実際に書いてみますね。
実際に表すと、
サンプル | サンプル |
右側を連結してみます | 連結してますよ〜♪ |
右側を連結してみます |
指定されたセルから、指定された数の右方向にセルが連結します。
こちらも実際に書いてみますね。
実際に表すと、
サンプル | サンプル |
下を連結してみます | 下を連結してみます |
連結してますよ〜♪ |
一般的な使い方として、表のソースを書きますので参考にしてください。これはスタイルシートにおける単位の種類です。
これを実際に表すと
単位 | 意味 | 指定例 |
---|---|---|
em | その要素(pや h1)のfont-sizeの値を1とする | p { font-size: 1.2em } |
ex | その要素のフォントのx-height(小文字のxの高さ)を1とする | p { margin: 1ex } |
px | コンピュータ画面上の1ピクセルを1とする | p { font-size: 12px } |
% | 多くは親要素の一部分を基準とした割合 | p { font-size: 120% } |
となります。これにスタイルシートで色や背景などの指定をしてみます。
参考までに、スタイルシートに以下のソースを書き込んでみます。スタイルシートの使い方は姉妹サイトの「3日で作るホームページ♪」を参考にしてください。
スタイルシートでは複数のセレクタ(要素)(上の例ではtd ,th)をカンマ,で区切って同時にスタイルを指定することができます。
また、tableに対して、border-collapse:collapse;を指定すると、テーブルの枠線が1本になり、すっきりします。
意外とこれは重宝しますので、覚えておくと良いですよ。
上のソースを実際にブラウザ見ると下のようになります。
単位 | 意味 | 指定例 |
---|---|---|
em | その要素(pや h1)のfont-sizeの値を1とする | p { font-size: 1.2em } |
ex | その要素のフォントのx-height(小文字のxの高さ)を1とする | p { margin: 1ex } |
px | コンピュータ画面上の1ピクセルを1とする | p { font-size: 12px } |
% | 多くは親要素の一部分を基準とした割合 | p { font-size: 120% } |
まぁ、ちょっと見た目はわかりづらいかもしれないですね・・・・
ようは、<tr>〜 </tr> の間の <td> 〜 </td>の数が横のセルの数(マス目の数)になるわけです。上のソースではtd が三つづつあるので、横に三つに区切られてるわけです。また、<tr> 〜 </tr>の数だけ下に増えるということです。
テーブルはソースが複雑になりがちで、はじめの頃はうまくいかないことも多いかもしれません。
慣れるまではとにかくやりまくるしかないですね・・・。