- ベストアンサー
CSSでテーブルを作成
CSSでホームページをデザインするときに、 □□ の形の箱二つを作るときに テーブルだと、 width=200px width=100% で右側の□はブラウザのサイズに合わせて調整してくれます。 しかしCSSで書く場合、 width=200px width=100% にしてしまうと、 □ □ のようになってしまいます。 CSSで width=200px width=100% のテーブル風を構築したいのですが、 可能でしょうか？
- ENTRE
- お礼率0% (16/2523)
- その他（プログラミング・開発）
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
とりあえず、右側のボックスのwidthは指定しません。 <style type="text/css"> #left {float:left;width:200px;border: 1px solid black;} #right {border: 1px solid black;} </style> <body> <div id="left">LEFT</div> <div id="right">RIGHT</div> </body>
関連するQ&A
- HTML、CSSについて。テーブル背景がズレる。
こんにちは。よろしくお願いします。 HTMLとCSS、2つのファイルを作成しています。 HTMLでテーブルを作成し、<td><div=名前></div></td> として、テーブルの中身はCSSにまかせています。 複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。 CSSでは、 div#名前 { width: 20px; height: 20px; margin: 0px; padding: 0px; background: url(画像名.gif); } ・ ・ ・ htmlを表示させてはcssのpxを調節し、 きれいな背景画像付きのテーブルが完成した！と思ったのですが、 ブラウザの文字サイズを最大に変更すると崩れてしまいました。 pxではなくて%で指定してみても崩れます。 解決策をご存知の方、教えてくださると有難いです。 よろしくお願いします。
- 締切済み
- HTML
- CSSでテーブルレイアウトが出来ません！
現在DreamweaverMXでテーブルを作っているのですが、うまく表示されません。というか設定方法がよく分かりません。 テーブルは2列で10行のテーブルを作っているのですが、CSSから枠線の表示部分の設定を行っても反されません。現在はテーブルの外回りの線が表示されるだけなのです。 CSSは以下になります。 .maintable { font-size: small; padding: 5px; border: 1px solid #666666; text-align: left; height: auto; width: 400px; } 中身の枠線を表示するにはやはりtdやtrのCSS指定を行わないといけないのでしょうか？しかしホームページのメニュー部分をテーブルで作っているのでそちらにも反映されてしまい、表示が変になってしまいます。 もしtdやtrにclass指定をする場合、すべてのtdやtrに指定していくのでしょうか？そうすると、指定する数が沢山になってしまうのですが・・・。 この問題について、お分かりになられる方がいらっしゃいましたら、よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- CSSでテーブルの表示
.table1 { border: 0px #000000 solid; } table1.s1{width: 20px; } table1.s2{width: 40px; } とcssを記述し <TABLE CLASS="table1" CLASS="s1"> ・・・ と行ってもs1,s2の項目が反映されません。 どのようにすればよいでしょうか？
- ベストアンサー
- HTML
- CSSのテーブルの件で
はじめまして よろしくお願いいたします。 CSSでテーブルを作っているのですが うまくいきません 作りたいのは下記のようなテーブルです ┌───────┐ │ A │ B │ └───────┘ 点線ではなく普通の線で構いません 大きなテーブルの幅が500pxとして Aを200px Bを300px にしたいのです テーブルのIDは「table2」にしています <外部CSSの部分> #table2{border:1px solid #000000; width:500px; } #table2 th{border:1px solid #000000; width:200px; } #table2 td{border:1px solid #000000; width:300px; } <htmlの部分> <table id="table2"> <tr> <td></td> </tr> </table> 色々やってみたのですが うまく行きません 詳しい方教えて頂けないでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- ｃｓｓでのテーブル
初心者です。 本を読みながら、スタイルシートでテーブルを作っているのですが、 左に設置したメニュー(縦に並べたボタン)のテーブルの右側に不要なスペースができ、メニューのテーブルと同じ色になってしまいます。 【内容】 .tdmenu{ vertical-align:top; background-color:#fa8072; width:140px; } p.menu{ font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; width:140px; background-color:#fa8072; height:2em } これが適応されていると思われます。 回答よろしくお願いします。
- ベストアンサー
- HTML
- ＣＳＳでテーブルを作る方法について
CSSでテーブルを作る方法についてアドバイスお願いします。 今、外CSSで、テーブルを作成しようとしているのですが、cssがhtmlに反映されていないようです。２つボックスを並べたいです。 .box1{ float: left; background-color: #cc0000; width: 200px; height: 200px; } .box2{ float: left; background-color: #d0dcdf; width: 200px; height: 200px; } htmlには、 <div CLASS="box1"></div> <div CLASS="box2"></div> と書きました。 どこが問題なのかどなたかご指摘いただけますでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
- cssで、1行2段のtableを記述するには？
cssで、1行2段のtableを記述するには？ → htmlのページに以下を挿入しました。 <table> <tr> <td width="2"></td> <td width="588"></td> </tr> </table> → htmlのページの<head>と</head>の間に以下を挿入しました。 <link rel="stylesheet" type="text/css" href="table.css"> → table.cssファイルを、onimotsuさんの指示に従い、以下のように記述しました。 TABLE{width : 640px;border-width : 0px 0px 0px 0px; padding-top : 0px;padding-left : 0px;padding-right : 0px; padding-bottom : 0px; background-color : #FFFFFF;} → table.cssファイルに以下を挿入するにはどうしたらいいのでしょうか？ いろいろ試しましたが、うまくいきません。 <tr> <td width="2"></td> <td width="588"></td> </tr> → うまく挿入できれば、htmlのページのtableの項は次のようにすっきりとなります。 <table> </table> よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします
- ベストアンサー
- HTML
- tableの枠について
よろしくお願いします。前回もtableについて質問をさせていただきましたが、今回は若干内容が違うため新たに質問させていただきました よろしくお願いします。 まず、cssとhtmlに以下の記述をしました。 【css】 table{ border: 2px solid #000000; border-collapse: collapse; width: 750px; margin-left:auto; margin-right:auto; } th.g{ border: 1px solid #000000; text-align: center; padding:10px; font-size: 1.0em; font-weight:bold; width: 750px; color: #0066cc; } 【html】 <table> <tr><th class="g">パソコン</th>tr> 上記の部分をブラウザで見るとwidth: 750px;の設定はしているのですが「パソコン」の文字に出来た枠と、外枠との間に右側ですが隙間が出来てしまいます。margin: autoではと思い、設定をしてみましたが 特別何も変わりません。 どなた様か、ご指導の程よろしくお願いします。
- ベストアンサー
- HTML
- CSSはまだ早い？
ホームページを何点か作っています。 ＣＳＳを使い出してから快適なので、tableもやめてしまって、デザインはすべてＣＳＳにしようかと 思っているのですが、サポートされていないブラウザを使っている人もまだまだ多いのでしょうか。
- 締切済み
- その他（プログラミング・開発）
