HTML初歩の初歩

〜その9〜
やさしい TABLE & 難しいCENTER

tableは難しい?

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

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

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

基本の枠組み

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

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

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

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

<table border="3" summary="表に付いての内容要約">
 <caption> 表題 </caption>
<tr>
<th> 0列目題目 </th>
<th> 1列目題目 </th>
<th> 2列目題目 </th>
<th> 3列目題目 </th>

</tr>
<tr>
<th> 1行目題目 </th>
<td> 1行目1列目 </td>
<td> 1行目2列目 </td>
<td> 1行目3列目 </td>
</tr>
<tr>
<th> 2行目題目 </th>
<td> 2行目1列目 </td>
<td> 2行目2列目 </td>
<td> 2行目3列目 </td>
</tr>
</table>

表題
0列目題目 1列目題目 2列目題目 3列目題目
1行目題目 1行目1列目 1行目2列目 1行目3列目
2行目題目 2行目1列目 2行目2列目 2行目3列目

若干の解説

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

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

レイアウトへの応用

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

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

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

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

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

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

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

LEFT-TOP CENTER-TOP RIGHT-TOP
LEFT-CENTER CENTER-CENTER RIGHT-CENTER
LEFT-BOTTOM CENTER-BOTTOM RIGHT-BOTTOM

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による解釈の相違が現われてきますので注意が必要です。

IE5、N4.7、N6での様々なセンタリングの実態調査
方法 IE5 N4.7 N6
Deprecatedであるタグを使った場合
<center>
<p>〜</p>
</center>
<center>
<table>〜</table>
</center>
<div align="center">
<p>〜</p>
</div>
<div align="center">
<table>〜</table>
</div>
<p align="center">

</p>
<table align="center">

</table>
方法IE5N4.7N6
CSSを使った場合
<p style="text-align:center">

</p>
<table style="text-align:center">

</table>
×
(テーブルの中は
センタリング
される
×
(テーブルの中は
センタリング
されない
×
(テーブルの中は
センタリング
される
<div style="text-align:center">
<p>

</p>

</div>
<div style="text-align:center">
<table>

</table>

</div>

(テーブルの中は
センタリング
されない

(テーブルの中は
センタリング
されない
×
<body style="text-align:center">
<p>

</p>
<body style="text-align:center">
<table>

</table>

(テーブルの中は
センタリング
されない

(テーブルの中は
センタリング
されない
×
<body style="text-align:center">
<img src="***.jpg">
<body style="text-align:center">
<div>
<img src="***.jpg">
</div>
<div style="text-align:center">
<img src="***.jpg">
</div>
×
<img src="***.jpg" style="text-align:center"> × ×

第1回  第2回  第3回  第4回  第5回  第6回  第7回  第8回  第10回  詳細目次  ページ冒頭



saiton.net/easy/html9.htm

©SAITO Toshiyuki