- ベストアンサー
テーブルとDIVとCSSについての質問
wanwan-gaoの回答
また記述ミスが・・・ずびばぜん 自分で言いながらｐのフォントサイズと領域がずれてました。 あとpタグ閉じてなかったり。 これにwidth=300 height=200の写真差し込んだらIEでもfirefoxでも 反映されました。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- *{ margin:0; padding:0; } img{ vertical-align:bottom; } table{ width:auto; height:auto; border:5px double #000; border-collapse:collapse; } table p{ color:#000; background-color:#999; font-size:14px; height:60px; text-align:center; } h2{ border:3px dotted red; text-align:center; } td{ width:auto; border:1px solid blue; } --> </style> <title>無題</title> </head> <body> <table> <tr><td><h2><img src="test.jpg" width="300" height="200" alt="写真左"></h2><p>あいうえお<br>かきくけこ<br>さしすせそ</p></td> <td><h2><img src="test.jpg" width="300" height="200" alt="写真右"></h2><p>あいうえお<br>かきくけこ</p></td></tr> </table> </body> </html>
関連するQ&A
- CSSでdiv内を下揃え
CSSでdiv内を下揃えは出来ないものでしょうか? テーブルを使った時の以下の表現をCSSで表現したいです。 <TABLE border="0" height="200"> <TR> <TD>ここは上から●pxに画像配置</TD> </TR> <TR> <TD valign="bottom">ここを下揃えで画像表示</TD> </TR> </TABLE> テーブルならすぐできるのですが… 下揃えの方法があれば教えてください。
- ベストアンサー
- CSS
- IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい
お世話になっております。 ・本文・テーブルは中央揃え ・テーブルの内容は左揃え というものをCSSで作りたいのですが、 どのようにしたらいいのでしょうか。 現在のページの一部は <div id="main"> <h1>タイトル</h1> <table border="1"> <p> 本文 </p> <tr> <td colspan="2"><h2 align="center">○○○</h2></td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> ～行が続きますが省略～ </table> </div> のようになっています。 ちなみに cssのmainは「text-align:center;」を指定しておりますが、 IE8にしたところテーブルが左寄せになってしまいました。 なるべく多くのブラウザで同じような配置になるようにしたいのですが どうしたらよいでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
- tableに対するdiv
テーブル内の文字色を白にしたい場合、 <style type="text/css"><!-- div.font{color:white;} --></style> <tr> <div class="font"> <td align="center" width="20%">★１</td> <td align="center" width="20%">★２</td> <td align="center" width="20%">★３</td> <td align="center" width="20%">★４</td> <td align="center" width="20%">★５</td> </div> </tr> このように指定しましたが、適用されません。 なぜでしょう？
- ベストアンサー
- HTML
- FireFox2.0でCSSを使ってテーブルそのものをセンタリングしたい
IE６だと #wrapper { text-align: center; } <div id="wrapper"> <TABLE border="1"> <tr><td>テキスト</td></tr> </table> </div> とやればテーブルそのものがセンタリングされるのですが、 FireFox2.0だと左に寄ったままです。 CSSを使わずに<center>で囲めばセンタリングされますが、 そうではなくてCSSを使ってやるやり方はないでしょうか？
- ベストアンサー
- HTML
- どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え
どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が 微妙で困っています。 サイトレイアウト大まかな段組は<div>でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、<div>タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりは テーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは？ みたいに、なってしまいます。 左に画像、右にコメント（文字列）などの関係のものが、以下に複数続いたりする場合、 どう考えてもテーブルのほうがよくない？って思うんですよね。 その場合でも無理やりdivタグでテーブル構造を作るもんなんですかね？ divタグだとコード量が少なくなるからSEO対策的に良いっていうのは理解できますが、 divタグはここまで作る、テーブルタグの使い分けが微妙です。 このときはテーブルにしないといけない。とかないんでしょうから ある意味センスなんでしょうが。。。。 製作の効率と、コンテンツの管理の仕方を考えると divタグとテーブルの使い方の境目が分からなくなってしまいます。 そのへんの考え方ノウハウを教えてください。
- ベストアンサー
- ホームページ作成ソフト
- divでtable表現
<table> <tr> <td>左の要素</td> </td>右の要素１<br>右の要素２</td> </tr> 左の要素は、真ん中（高さ）にあります。 このtableをdivで表現するためには、どうすれば良いですか？ 以下、自分が考えたものです。（左の要素の下に右の要素が割り込んでしまいます） <div style="float:left; margin:50%"> 左の要素 </div> <div> 右の要素１<br>右の要素２ </div>
- ベストアンサー
- HTML
- 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・DIVについて
CSS初心者ですが、質問させていただきます。 ＜やりたいこと＞ 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え ＜私が作成したもの＞ （関係ない部分は省略しています。） （実際は、(1)(2)の部分は半角英字の名前をつけています） <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center; } div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> ＜表示のされ方＞ (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。
- 締切済み
- CSS
- CSSのテーブルで色分けをする場合
こんばんわ。 HTMLでテーブルタグを使用していたのですが、行数が多くカスタマイズするのが辛くなってきました。 そこで外部から読み込むタイプのCSSを作り始めました。 本題ですが、1つの表を作っています。 1行目と2行目では背景色やフォントなどを変更したいと思っています。 テーブルの背景色は#dadbefです。 table.movie {width: 550; background-color: #dadbef; } までは作ったんですが table.movie td {background-color: #888888; } これではうまくいかないですよね。。 TDをクラスごとに設定する、というのを思いついたんですが、ここで頭がパンクしてしまいました。。 それともCSSで表の列を色分けするのはやめたほうがいいでしょうか
- ベストアンサー
- その他（プログラミング・開発）
お礼
何回も丁寧に、ありがとうございました。 色々工夫した結果、まぁまぁできました。 けど、ブラウザ変えたらわからないし、正しいかわからないので、 参考に再度やってみたいと思います。 ありがとうございました。