掲示板/スタイルシート質問板/過去ログ/一覧/ tebleタグを使わずに作りたい

0 名前：トラ： 2006/11/06（月） 21:52 ID:l/A3Mhom

下記のようなページのテーブルをtableタグを使わずにcssで作ることは出来るのでしょうか。
<div class="">のような感じでボックスを使って作ろうとしたのですが
テーブルの中の10、20の部分のセルがどうしても出来なくて困っています。

どうかお願い致します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
.main {
margin:0px;
border:1px #2b2b2b solid;
border-collapse: collapse;
font-weight:bold;
}
.main td {
padding:5px;
border:1px #2b2b2b solid;
}
.left {
background-color:#66bb66;
}
.right {
background-color:#bbbbbb;
}
-->
</style>
</head>
<body>

<table class="main">
	<tr>
		<td rowspan="2" class="left">左左左左</td>
		<td rowspan="2">○○</td>
		<td>10</td>
		<td>△△</td>
		<td>30</td>
		<td rowspan="2">××</td>
		<td rowspan="2" class="right">右右右右</td>
	</tr>
	<tr>
		<td>20</td>
		<td>□□</td>
		<td>40</td>
	</tr>
</table>

</body>
</html>

1 名前： くいん ： 2006/11/06（月） 21:52 ID:nM/3KUU4

こういうの考えるの大好きです。という個人的感想はさておき…

<div style="width:350px;height:50px;border:1px #2b2b2b solid;">
 <div style="width:78px;height:50px;background-color:#66bb66;border-right:1px #2b2b2b solid;float:left;">左左左左</div>
 <div style="width:44px;height:50px;border-right:1px #2b2b2b solid;float:left;">○○</div>

 <div style="width:28px;height:50px;border-right:1px #2b2b2b solid;float:left;">
  <div style="height:24px;border-bottom:1px #2b2b2b solid;">10</div>
  <div>20</div>
 </div>

 <div style="width:44px;height:50px;border-right:1px #2b2b2b solid;float:left;">
  <div style="height:24px;border-bottom:1px #2b2b2b solid;">△△</div>
  <div>□□</div>
 </div>

 <div style="width:28px;height:50px;border-right:1px #2b2b2b solid;float:left;">
  <div style="height:24px;border-bottom:1px #2b2b2b solid;">30</div>
  <div>40</div>
 </div>

 <div style="width:44px;height:50px;border-right:1px #2b2b2b solid;float:left;">××</div>
 <div style="width:78px;height:50px;background-color:#bbbbbb;float:left;">右右右右</div>

</div>

配置や見た目のみって感じでスタイルシートは直接記述してます。
調整やスタイルシートの記述方法なんかは色々試してみてください。

でも…やってみて思ったのですがこれはテーブルのほうがいいような？

2 名前： チャンタ ： 2006/11/06（月） 21:52 ID:xU6q6eSz: トラさん、くいんさん、はじめまして。
初めてこちらのサイトにお伺いして、覗かせていただきました。

トラさん、すごいレイアウトを考えてますね・・・。
そしてこのレイアウトをfloatプロパティで作っちゃったくいんさんに好感持てます。
わたしもfloat専門なので、と言うより、positionを上手く使えないだけなんですが（＾＾；。

さて、くいんさんのソースはfloat: left;を使って左詰に７列、という記述法のようにお見受けします。

私もかつて、floatを使って左詰の３列のデザインをしようとしましたが、HTML4.01では上手くいきませんでした。
しかし、MovableTypeではこの記述法で上手く出来るので、もし、もしくいんさんの記述法で上手くいかないときは、HTML4.01からXHTML1.0に変更しなくてはいけないかもしれません。

HTMLからXHTMLに変えるには、空要素を閉じるなど、いろいろ手直しが必要になりますよね。
それが無理で、どうしてもこのレイアウトを実現したならば、割り切ってテーブルにしておく方が楽って言えば楽ですが・・・。

参考になれば幸いと思い投稿させていただきました。では。

3 名前： 五月雨 ： 2006/11/06（月） 21:52 ID:lgQYpCai

表をCSSで再現する場合は、ブロックレベル要素にスタイルシートを被せる形にします。
下記URLの「CSSによる擬似表の作成」が参考になるかと思います。

表関連要素の最適化
http://www.seo-equation.com/reference/cat17/table_css

table要素の代替えとなりうるブロックレベル要素には、dl要素, ul要素, div要素があります。
私はdl要素を使うことが多いですが、用途を考えて使い分けると良いでしょう。

> テーブルの中の10、20の部分のセルがどうしても出来なくて困っています。
こちらは高さ(heightプロパティ)を指定することで対応してください。

個人的には、トラさんの示された表を実現するには、table要素が最適だと思います。
これをCSSに最適化するのなら、レイアウトをdl要素,ul要素で実現しやすい形に変更することをお勧めします。
残念ながら、CSSは複雑な対応関係を示すのに向いていません…。
例えば、以下のようなレイアウトはいかがでしょうか？

<dl>
	<dt>左左左左</dt>
	<dd>○○</dd>
	<dd>10 - △△</dd>
	<dd>20 - □□</dd>
	<dt>右右右右</dt>
	<dd>××</dd>
	<dd>30 - △△</dd>
	<dd>40 - □□</dd>
</dl>

これに "float: left" を使うなどして、レイアウト,デザインに味付けをしていきます。

4 名前：匿名： 2006/11/06（月） 21:52 ID:IbwOHKIj: >>0
既に言われていることだが、見た感じ、それは明らかに「表」なのだから、
table 要素としてマークアップ「しなければならない」。

もし、>>3が示したように、構造化データをリスト形式で書き出していて、
それを表示上は表にしたいのであれば、display: table および関連プロパティを使う。
ただし、IE6/Win は対応していない。

まずマークアップで文書の意味付けを行い、それを元にレイアウトの仕方を検討するのだから、
文書の意味付けなしにレイアウトの方法だけ聞かれても、ちょい困る。
初心者が使うワープロや、DTPのような「まずレイアウトありき」の発想は捨て去れ。

HTML 4.0は多機能な表を導入し、CSS2.0もそれに合わせて複雑な表モデルを提供している。
だから原則として、どんなマークアップをしても表として表現しうる。
しかし残念ながら、実装が（と言うよりIEが）全く追いついていないのが現状。