2005-04-22 Fri

table要素を使わない、擬似tableの作り方

2×2のテーブルならば、table要素は必要なし


 Webページ制作時に、クライアントから、table、th、td、trを一切使ってはいけないという条件を提示される方は増えてきていると思います。

 とはいえ、div要素やspan要素で無理やり・・とかも、あまりスマートではありません。

 なんとかスマートにtable要素を排除できないかなぁ、と思いました。

 そして、頭をひねりながら、神崎正英氏のユニバーサルHTML/XHTMLを眺めて、面白い要素を発見し、検索したら答えが見つかりました。

 さて、解答ですが

 ●おもに、CSS + dl、dt、dd要素を使います

 この対処の仕方をご存知の方も多いかと思います。ですけど、書いてしまいます。

 以下のソースを眺めてください。

<html>
<head>
<style>
table{border:#000000 solid 1px;border-collapse: collapse;}
tr{border:#000000 solid 1px;}
td{border:#000000 solid 1px;}
dl{width:410px;margin:0px;border-width:0px 1px 1px 0px;border-color:#000000;border-style:solid;clear:left;}
dt,dd{margin:0px;border-width:1px 0px 0px 1px;border-color:#000000;border-style:solid;}
dt{width:170px;margin:0px;font-weight:bold;float:left;clear:left;}
dd{margin-left:170px;background:#ffffff;}
</style>
</head>
<body>
<p>擬似テーブルのサンプル</p>
<br />
<p>
●table要素を使ったテーブル
<table>
<tr><td>今日は</td><td>多忙につき</td></tr>
<tr><td>他の記事は</td><td>作れませんでした</td></tr>
<tr><td>今後も</td><td>がんばりモス</td></tr>
</table>
さすが、テーブル要素。伸縮自在で扱いやすい。
</p>
<br />
<p>
●table要素を使わない擬似テーブル
<dl>
<dt>今日は</dt><dd>多忙につき</dd>
<dt>他の記事は</dt><dd>作れませんでした</dd>
<dt>今後も</dt><dd>がんばりモス</dd>
</dl>
擬似テーブルの弱点は<br />
 ・2×2のテーブルを作りづらいこと。<br />
 ・セルの幅は固定にするべき<br />
など、案外多い。<br />
</p>
</body>
</html>


 このソースをブラウザで描画すると、こちらのようになります。

 いかがでしょうか。少し融通がききませんが、まさしくテーブルです。

 なぜ、擬似テーブルはサイズが固定なのか・・それは、CSSのwidthプロパティをはずしてみれば分かります。

 今回もユニバーサルHTML/XHTMLからデザインのヒントをいただきました。

ユニバーサルHTML/XHTML
ユニバーサルHTML/XHTML
posted with amazlet at 05.04.23
神崎 正英
毎日コミュニケーションズ (2000/11)
売り上げランキング: 2,159
通常24時間以内に発送
おすすめ度の平均: 4.3
5 次世代HTML入門の名著。
5 ホームページの設計をすっきり説明してくれる
5 久々に出たHTML解説本の良著


 この記事を書くにあたり、いろいろなサイトを拝見しましたが、どれも私には難しいので引用は避けさせていただきます。

 参考になる記事をご存知の方は、是非ご連絡ください。とくに2×2以上のテーブルはどうしたものか・・。

【関連リンク】
The Web KANZAKI -- Japan, music and computer

投稿者:としのり  日時:23:59:59 | コメント | トラックバック |