ベストアンサー

CSS でテーブルを作るには？

2007/01/13 13:43

基本的なことで申し訳ないのですが、 CSS でテーブルを作るにはどうすれば良いのでしょうか？例えばセルが 3 x 3 の場合はどうでしょう？それを中央寄せにする方法も教えていただけると助かります。

yasu182
お礼率53% (149/277)

CSS
回答数6
ありがとう数7

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

345itati
ベストアンサー率48% (795/1639)

2007/01/13 18:21 回答No.5

#1です。レイアウトのためにテーブルは使うべきではないという意味でなら、テーブルを使わない方針に間違いは無いかと。まあ、どうしても<table>組まなきゃ意図するレイアウトが実現出来ない場合は、使ってもやむを得ないかなと思えますけど。勿論、「表作成」の為ですらテーブルを使わないというのは間違っていますが^^; 頂いたソースをちょっといじらせて頂いて、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>[ CSS ]</title> <meta http-equiv="content-type" content="text/html; charset=shift-jis"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head> <body> <div class="main"><div class="c1">1</div><div class="c2">2</div><div class="c3">3</div><div class="c4">4</div></div> </body> </html> marginとかborderは細かく微調整して頂くとして、こんな感じであればいいのでしょうか？

質問者

お礼 2007/01/13 19:25

いやー　参りました！見事にどのブラウザでも動きますね。ほんとにありがとうございます！！自作出来るよう何度も改造してみます。よろしければもう少し質問があるのですが、 margin-left: auto;　を調べてみると「ブラウザが自動的にマージンを設定」とあったんですが、自動というのはこの場合どんな意味なのでしょうか？また、.c1 {　　}　の中に text-algin: center; vertical-align: middle; を入れてもテキストが中央に行かないのはどうしてでしょうか？ padding: 10px; と c1 から c4 まで入れると table の cellpadding に近いものになるのですが、セル自体も大きくなってしまいます。なにか対処法ありますでしょうか？わかる範囲で教えていただけると助かります！

質問者

補足 2007/01/15 11:09

> 345itati さん div を入れ子にすることで出来ました。とても勉強になりました！！

その他の回答 (5)

-Kei
ベストアンサー率50% (151/299)

2007/01/13 18:41 回答No.6

CSSによるデザインならこのページが参考になると思います。 http://www.geocities.jp/multi_column/practice/2column1.html http://www.geocities.jp/multi_column/practice/3column1.html

MAN_MA_RUI
ベストアンサー率41% (426/1024)

2007/01/13 15:05 回答No.4

一応念のために申し上げておきますが、リストとして用いる表のデータを記述する際にはテーブルタグを使わなければなりません。時折テーブルタグの仕様に問題があると誤解して表のマークアップまでCSSで代用される方がいますけど、この行為は逆にユーザーのアクセシビリティに対しての阻害となりえます。 CSSは無効にすることが出来たり対応させないブラウザと言うものが存在しますから、なるべくHTML本体は文書構造を定義したものにすべきです。よってテーブルは文書構造の上で必要、と。それが分かっていた上でテーブルもどきを作成したいときは、divにborderやfloatを指定することでお望みのものを実現できると思います…が、環境によって正しく表示できなくなるケースが多いのでご注意ください。

noname#23734

2007/01/13 14:04 回答No.3

<table align="center"> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table> tableのalign属性はW3C非推奨属性でCSSを使うことが薦められています。 http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8&rls=GGLG,GGLG:2006-05,GGLG:ja&q=table+HTML+%E8%A1%A8%E3%80%80%E4%BD%9C%E3%82%8A%E6%96%B9

質問者

お礼 2007/01/13 14:38

こちらの回答は CSS でなく HTML だと思いますが。。。

-Kei
ベストアンサー率50% (151/299)

2007/01/13 13:55 回答No.2

tableタグではダメなんですか？

質問者

補足 2007/01/13 15:51

http://www.csszengarden.com/ 最近このサイトを知ったのですが、ページ右側のリンクから行くいろいろなデザインは同じ HTML を元に CSS だけを書き換えて作ってるそうです。 Firefox の Web Developer Tools で CSS を無効にするとたしかに表示が同じでした。そこで自分もそんなページを作ってみようかと code を解読しようと思ったんですがうまくいかず。

345itati
ベストアンサー率48% (795/1639)

2007/01/13 13:55 回答No.1

汎用ブロックレベル要素<div>を使うのが簡単かと。 CSSで<div>に幅と枠線を指定、そして入れ子にしてけば宜しいかと。セルとして指定する<div>はfloat: left;で回り込みを指定。またセンタリングは、幅をwidth: 400px;でもwidth: 40%;でもいいから指定すれば、 margin-left: auto; margin-right: auto; でセンタリングされる。 IE5.5以前及び、IE6の後方互換モードでは、この記述ではセンタリングされないのでtext-align: center;を加えておいた方がいいかもしれないちなみに記述を全部教えてくれという「回答者に作業を求める行為」はマナー違反ですので、ある程度ご自分で作業して下さいね。

質問者

お礼 2007/01/13 15:49

丁寧な解説ありがとうございます！以下の code で IE6 で動作したのですが、センター寄せにならないのと、Firefox でエラーが出るのはなにかアドバイスありますでしょうか？ display: block; を試したのですが別のエラーになってしまいました。。。もっと効率の良い書き方があるとも思うのですが。 <html> <head> <title>[ CSS ]</title> <meta http-equiv="content-type" content="text/html; charset=shift-jis"> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css">  </style> </head> <body topmargin="0" leftmargin="0"> <span class="c1">1</span><span class="c2">2</span> <span class="c3">3</span><span class="c4">4</span> </body></html>