cssで商品を並べる時、テーブルを使わないでできる？

質問

cssとっかかったばかりの初心者ですのでわけのわからない質問ばかりしてしまいますが、よろしくお願いします。

cssを使ったページに商品を並べる場合、テーブルを使ってレイアウトするのが楽と思いますが、テーブルを使わないで2列、3列というようにできますか？

普通にテーブルを使ったら
<table>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td><img src="img/01.jpg" width="100" height="100"></td>
<td><img src="img/02.jpg" width="100" height="100"></td>
<td><img src="img/03.jpg" width="100" height="100"></td>
</tr>
</table>

ですが、テーブルタグをつかわず、cssで列を指定ってできますか？

それとも、商品ラインナップの場合はテーブルで入れるのが普通ですか？？？

いろいろやってみたんですが、わからなくなったので、質問します。
よろしくお願いします。

回答No.3

sion_fs · ベストアンサー

＃１です。
結局、ＴＡＢＬＥタグ使うのが楽です。使っちゃダメって訳では無いし（現時点では）、殆どのブラウザで対応していますから。

で、その場合のソースですが、
　<td><div class="item">～</div></td>
とした場合は枠線が<td>の枠と<div>の枠で二重に表示されますよね。その辺りは適宜修正を加えてください。

また、CSS未対応ブラウザに対応させる為に、<table width="～" border="～" class="～">という様に、CSS未対応のブラウザの為に要素の指定も必要です。

回答No.4

sandybrown

No2について

> リストは普通縦表示ですよね？
単純に
<ul>
<li>item <img ></li>
<li>item <img ></li>

のように並べてもいいかなと。
桁あわせをしたければ<span>等も使ってCSSで揃える手法もあります。
興味があれば「CSS 段組」で検索してみるとサンプルが見つかると思います。

> また、先に「#content #main ul」「#content #main ul　li」で、リストのポイントを指定してしまった場合、新しく「ul」「li」を指定するにはどうしたらいいですか？

すいません、ここは理解できませんでした。

お礼

sandybrownさん、意味不明なことを聞いてすみませんでした。

なんとかやれそうです。
ありがとうございました。

回答No.2

sandybrown

> 商品ラインナップの場合はテーブルで入れるのが普通ですか

「表」だなと、思えば「table」にするのが妥当です。「表」を表現するための「table」だし。
一覧であればリストの類（olやul、場合によってはdl）でもいいかも。

そのうえで、スタイルを当てるのに必要ならばdivやspanのような意味を持たない要素を追加したりします。

補足

リストは普通縦表示ですよね？
横に並べたい場合のタグはありますか？

また、先に「#content #main ul」「#content #main ul　li」で、リストのポイントを指定してしまった場合、新しく「ul」「li」を指定するにはどうしたらいいですか？

（入れる場所は　「#content #main 」の中なんです。。。）

言ってることが意味不明かも…。
かなりの混乱です。

回答No.1

sion_fs

.cell{
background-color:#ccffff;
border:1px solid #333333;
padding: 5px;
float:left;
display:table-cell;
}

１行目で背景を
２行目で枠線を
３行目でパディングを
４行目で、回り込む事の宣言を
５行目で、ブロックレベルのタグをセルとして扱う事を
それぞれ指定します。

<div class="cell">
<h1>item1</h1>
<img src="img/01.jpg" width="100" height="100">
</div>
<div class="cell">
<h1>item2</h1>
<img src="img/02.jpg" width="100" height="100">
</div>
<div class="cell">
<h1>item3</h1>
<img src="img/03.jpg" width="100" height="100">
</div>

これで、テーブルと同一の表示が出来ますが、次の点にご注意下さい。

１）ＣＳＳ２に対応していないブラウザでは、実現出来ない。（これは、結局テーブルタグとの併用で解決するしかない）

２）画面サイズを狭めると、自動的に下に回りこんでしまう。（必ずしも横に並ぶ訳では無い）これは、他にも幾つかの指定をする事で解決出来るけど、ソースが汚くなるし更新の度に細かい修正が必要になる。

３）ＣＳＳを使う事が推奨されているが、現実問題としてその様にしているサイトは皆無。（通常は、テーブルタグと併用して利用する）

お礼

sion_fsさん、いろいろありがとうございました。
できる範囲でやることにします。

とりあえず、テーブルを使ってみます。
わからなかったらまた教えてください。

補足

sion_fsさん、ありがとうございます。

では、テーブルタグを使ってもＯＫということでしょうか？

えっと、テーブルを使って、その中で指定しようかと思ったんですが、そういうのでもいいでしょうか？

.table{
border-collapse: collapse;
width: 500px;
margin-top: 20px;
}

.item {
position:relative;
width: 215px;
border: 1px #999999 solid;
font-size:95%;
text-align: left;
padding: 10px 10px;
height: 380px;
}

タグを書く時は

<table class="table">
<tr>
<td><div class="item">
<h3>item1</h3>
<p><img src="img/01.jpg" width="100" height="100" class="contentImgL" />item1
</p>
</div>　</td>
<td><div class="item"><h3>item2</h3>
<p><img src="img/02.jpg" width="100" height="100" class="contentImgL" />item2</p>
</div>　</td>
</tr>
<tr>
<td><div class="item"><h3>item3</h3>
<p><img src="img/03.jpg" width="100" height="100" class="contentImgL" />item3</p>
</div>　</td>
<td><div class="item"><h3>item4</h3>
<p><img src="img/04.jpg" width="100" height="100" class="contentImgL" />item4</p>
</div>　</td>
</tr>
</table>

にしたらどーだろう！？？？とか考えていたのですが、これじゃまずいでしょうか？