- ベストアンサー
CSS でテーブルを作るには？
基本的なことで申し訳ないのですが、 CSS でテーブルを作るにはどうすれば良いのでしょうか？ 例えばセルが 3 x 3 の場合はどうでしょう？ それを中央寄せにする方法も 教えていただけると助かります。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
#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"> <!-- body { font-family: Arial, Verdana; margin: 0px; padding: 0px; } .main { width: 210px; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; border: none; text-algin: center; } .c1 { width: 100px; height: 100px; background-color: #ff0000; border:none; margin: 1px; float: left; text-algin: left; } .c2 { width: 100px; height: 100px; background-color:#0000ff; border:none; margin: 1px; float: left; text-algin: left; } .c3 { width: 100px; height: 100px; background-color: #ffff00; border:none; margin: 1px; float: left; text-algin: left; } .c4 { width: 100px; height: 100px; background-color: #00ff00; border:none; margin: 1px; float: left; } --> </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は細かく微調整して頂くとして、こんな感じであればいいのでしょうか？
その他の回答 (5)
- -Kei
- ベストアンサー率50% (151/299)
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)
一応念のために申し上げておきますが、リストとして用いる表のデータを記述する際にはテーブルタグを使わなければなりません。 時折テーブルタグの仕様に問題があると誤解して表のマークアップまでCSSで代用される方がいますけど、 この行為は逆にユーザーのアクセシビリティに対しての阻害となりえます。 CSSは無効にすることが出来たり対応させないブラウザと言うものが存在しますから、 なるべくHTML本体は文書構造を定義したものにすべきです。 よってテーブルは文書構造の上で必要、と。 それが分かっていた上でテーブルもどきを作成したいときは、divにborderやfloatを指定することでお望みのものを実現できると思います…が、環境によって正しく表示できなくなるケースが多いのでご注意ください。
<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
お礼
こちらの回答は CSS でなく HTML だと思いますが。。。
- -Kei
- ベストアンサー率50% (151/299)
tableタグではダメなんですか？
補足
http://www.csszengarden.com/ 最近このサイトを知ったのですが、 ページ右側のリンクから行く いろいろなデザインは 同じ HTML を元に CSS だけを書き換えて作ってるそうです。 Firefox の Web Developer Tools で CSS を無効にすると たしかに表示が同じでした。 そこで自分もそんなページを作ってみようかと code を解読しようと思ったんですがうまくいかず。
- 345itati
- ベストアンサー率48% (795/1639)
汎用ブロックレベル要素<div>を使うのが簡単かと。 CSSで<div>に幅と枠線を指定、そして入れ子にしてけば宜しいかと。 セルとして指定する<div>はfloat: left;で回り込みを指定。 またセンタリングは、 幅をwidth: 400px;でもwidth: 40%;でもいいから指定すれば、 margin-left: auto; margin-right: auto; でセンタリングされる。 IE5.5以前及び、IE6の後方互換モードでは、この記述ではセンタリングされないのでtext-align: center;を加えておいた方がいいかもしれない ちなみに記述を全部教えてくれという「回答者に作業を求める行為」はマナー違反ですので、ある程度ご自分で作業して下さいね。
お礼
丁寧な解説ありがとうございます！ 以下の 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"> <!-- body { font-family: Arial, Verdana; } .c1 { width: 100px; height: 100px; background-color: white; border: solid 1px #cccccc; margin-left: auto; margin-right: auto; } .c2 { width: 100px; height: 100px; background-color: white; border-top: solid 1px #cccccc; border-right: solid 1px #cccccc; border-bottom: solid 1px #cccccc; margin-left: auto; margin-right: auto; } .c3 { width: 100px; height: 100px; background-color: white; border-left: solid 1px #cccccc; border-right: solid 1px #cccccc; border-bottom: solid 1px #cccccc; margin-left: auto; margin-right: auto; float: left; } .c4 { width: 100px; height: 100px; background-color: white; border-right: solid 1px #cccccc; border-bottom: solid 1px #cccccc; margin-left: auto; margin-right: auto; float: left; } --> </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>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
いやー 参りました！ 見事にどのブラウザでも動きますね。 ほんとにありがとうございます！！ 自作出来るよう何度も改造してみます。 よろしければもう少し質問があるのですが、 margin-left: auto; を調べてみると 「ブラウザが自動的にマージンを設定」 とあったんですが、 自動というのはこの場合どんな意味なのでしょうか？ また、.c1 { } の中に text-algin: center; vertical-align: middle; を入れてもテキストが中央に行かないのはどうしてでしょうか？ padding: 10px; と c1 から c4 まで入れると table の cellpadding に近いものになるのですが、 セル自体も大きくなってしまいます。 なにか対処法ありますでしょうか？ わかる範囲で教えていただけると助かります！
補足
> 345itati さん div を入れ子にすることで出来ました。 とても勉強になりました！！