HTML初歩の初歩

tableは難しい？

私自身もそうでしたが、エディターで HTML を打ち込む初心者にとって、table は全体像が把握しにくいだけに難しく感じられるものです。特に table を本来の「数値データを表にして示す」以外の用途に使おうとすると難しくなります。

レイアウトに table を使う事は「出来ます」がスタイルシートが行うべき仕事だとされています。しかしスタイルシートでも、思い通りのレイアウトを実現する事は、もしかしたなら table を使う以上に難しいのです。

ですから難しいのは table のせいではなく、レイアウト自体が難しいのです。

基本の枠組み

表（table）の基本は以下の通りです。横のひとかたまりを行（table row）といい、行の中の一つ一つの欄をセル（table data）と呼びます。

ソースと実例を以下に示します。summary は表示されませんが、付けるように勧告されています。caption は表の上部中央に位置し、表の内容がわかるような題名をつけると良い事もあります。

th は table header の略で、行や列の内容を示します。通常太字になってセンタリング表示されます。

以下の caption と th はなくても良いのですが、データを示すならば必要でしょう。

若干の解説

border を書かないと枠線無しになります。border を書く場合は="  "内にピクセル単位の数値を入れて下さい。

セルの中身と枠線との間隔は cellpadding="  " で指定します。上の例では見やすくするために cellpadding="10" をこっそり入れています。cellspacing は枠線同士の間隔を指定します。共に、<table> の中に書きます。

レイアウトへの応用

cellspacing と cellpadding を利用すると border="0" でさまざまなレイアウトが可能になります。

table の幅は table にwidth="  "で％またはピクセル数を指定します。絶対値を入れると、レイアウトは保持されますが、ディスプレーによっては画面からはみ出してしまい、横方向にスクロールさせないと全体像が見られなくなりますので注意が必要です。

table の高さは table に height を直接書き込まず、th や td に絶対値で指定しなさいと規格書には書いてあります。

セル内のデータの位置の指定は、以下のようにします。

水平方向   align="left" , "center" , "right"
   垂直方向   valign="top" , "middle" , "bottom"

table自体をセンタリングするのは、ブラウザーによって相違があるので最も確実な方法は、残念ながらtable内にalign="center"とするしかないようです。

以上を組み合わせると、かなりのレイアウトが可能になります。ここでは枠線をわざと表示させて参考に供します。

CENTERの出し方

レイアウトを考える時にセンタリングは重要な手段です。しかし単純に<center>と書けば解決するものでもないのです。

<center>は、HTML4.0以降では Deprecated（「使うのは好ましくない」とか「使わないようお願いします」程の意味）とされています。こうしたレイアウトに関わる要素は将来的には廃止され、スタイルシートによる指定に移行する方向付けが決まっています。

では<div="center">はどうでしょうか？この書き方も意味する所は<center>と同じですから Deprecated です。

ここは CSS（カスケーディング・スタイル・シート）を使って指定するしかありません。その場合、CSS を正確に解釈する UA（ユーザー・エージェント＝ブラウザー）が必須ですが、現状では様々な UA が市場占有率を分け合っています。それらにより肝心の解釈が少なからず異なっている事を知っておく事は、残念で厄介ですが重要です。

センタリングの実際

手許の環境Windows98で、Internet Explorer5.01（IE）、Netscape4.7（N4）、Netscape6（N6）の三つのUAを使い以下の調査をしてみました。

ご覧頂ければ分かるように、皮肉にもDeprecatedとされるタグを使うと巧く行くのですが、CSSを使うとUAによる解釈の相違が現われてきますので注意が必要です。

お分かりと思うが、<img src="***.jpg">を<div>〜</div>で囲まずに直接書くことは文法に反している。