CSSとtableタグについて

はじめまして。すぐ使える株式会社の井上と申します。

横3×縦2 などの表示は、横幅を決めた div を float:left で連記することで実現できます。

*CSSで表組みするコードの例
<div style="width: 900px"> ←外枠

<div style="width: 300px; float:left">....</div> ←セル1つに該当
<div style="width: 300px; float:left">....</div>
:(6個分)

</div> ←外枠の終わり

**留意点
上記のように単純にサイズ指定するとセルに該当する<div>の中身やブラウザ、DTDによってはセル2つで折り返しされてしまう場合もありますので、CSS指定は参考書などを見ながら工夫して下さい。


ご参考:表組み風の画像一覧を作る方法
PR---5,250円のCMS「すぐ使えるCGI」

はじめまして、シンクライズの吉村です

CSSで3分割で表示させるのであれば
Floatで左のみを使用して
横幅を指定して一段目の並びを作っていく事が良いかと思われます。

参考例
.botan{ float:left; width:200px;}
.clear{ clear:both;}

clearは2段目を入れる際に、回り込みをクリアにし
それから同じ用に作るようにします。

TABLEタグについては、利用用途によって使い分けた方がよろしいかと思います
主にTABLEタグは表等に使用する事が多く、レイアウトでい使用する際はTABLEタグを使わない方がいいです。

ご参考になれば幸いです

ホームページ制作|株式会社シンクライズ
http://syncrise.co.jp

こんにちは、アイズ･プロダクションの早川です。

ご質問のようなことはもちろん、floatプロパティを使えば実現できます。
その時、メニューということでしたら、リストタグを使うのが一般的でしょう。

「縦2」で横幅を均等にということでしたら一つの案として書き方の例をあげておきます。

*書き方例

htmlに

<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
<ul>
<li>メニュー4</li>
<li>メニュー5</li>
<li>メニュー6</li>
</ul>

と記述し、スタイルシートで

ul {
width:300px; /*3つのメニュー全体の任意幅
list-style-type:none;
}
li {
width:33%;
''float:left;''
text-align:center;
}

と書くのが簡単です。

ひとつ、老婆心で申し添えると、「TABLEタグは使わない方がいいという話をよく聞く」というのはいろいろな意味があると思いますが、「SEOの観点から使わない方がよい」ということを意識するのであれば、CSSは外部ファイルにすることをお勧めします。

ご参考になりますように