tableタグで作るような表をCSSで作る方法

質問

一つのページに表（横：600px、縦：155px）を20～30個くらい表示させたいのですが、tableタグを多用するとページが重くなると聞きました。

そこで、CSSを使って表を作ろうと思うのですが、どのように作れば良いのか分かりません。
ご存知でしたら教えてください。

私が作りたい表は下記になります。

XHTML 1.0 Transitional

横幅：600px
縦幅：155px

4行3列で、一番左の列の4行を繋げて(tableタグでの記述は<td rowspan="4">）一つの空間になっているのもの。
セルとセルの間隔は5pxのもの。

HTMLとCSSの記述を教えていただけると幸いです。
よろしくお願いします。

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.3

syagain · ベストアンサー

・divにボーダーをつけてセルのようにする。
・floatで位置指定をして、表のように収める。

というやり方で考えてみました。
無理矢理収めたので、融通は利かなそうですが、
できることはできました。

**CSS
.soto{
border:0px;
width:600px;height:155px;
padding:3px;
clear:both
}

.hidari{
border:1px black solid;
width:160px;height:155px;margin:2px;
float:left;
}

.naka{
border:1px black solid;
width:100px;height:32px;margin:3px 2px 3px;
float:left;
}

.migi{
border:1px black solid;
width:320px;height:32px;margin:3px;
float:right;
}

**HTML
<div class="soto">
　<div class="hidari">左</div>
　<div class="naka">中央</div>
　<div class="migi">右</div>
　<div class="naka">中央</div>
　<div class="migi">右</div>
　<div class="naka">中央</div>
　<div class="migi">右</div>
　<div class="naka">中央</div>
　<div class="migi">右</div>
</div>

　細かいサイズのずれはあると思いますが、
　safari,firefoxではこれで一応できました。
　ただ、やはり無理に作ったものなので、
　文字が多いとはみ出たりなど、
　テーブルに比べて劣る点はあると思います。

お礼

ご回答ありがとうございます。

やはりCSSで表を作成するのは大変そうですね。
CSS初心者の私には、とても考え付かないアイデアでした！
大変勉強になりました。

この度はご親切にありがとうございました。

回答No.2

noname#100277

レイアウトの為に目的外でのtable適応なら考え物ですが、本来の「表」としての使い方ならtable使用するのは構わないと思います。
特に問題は無いでしょう。
HTMLでしか出来ない事は其の侭で、細かい指定はCSSで実行すれば良いのでは？

お礼

ご回答ありがとうございます。

tableは表の作成に使うのであれば問題ないのですね。
とても参考になりました。

回答No.1

shokodei

えーと、「表」なので、テーブルでイイと思いますけど。重くなるというほどでもないと思いますよ。

むしろ、CSSでどうにかする方が、レンダリングエンジンの負荷になったりして……。（それもないとは思うけど）

お礼

ご回答ありがとうございます。

初心者はおとなしくtableを使っておいた方が良さそうですね。
とても参考になりました。