ベストアンサー

スタイルシートでtableをセンター配置

2006/12/13 13:38

先日からいろいろとここで教えていただいてますが、また壁にぶつかってしまいました。とりあえず下記のソースを見てください。 <html> <head> <title>タイトル</title> <style type="text/css">  </style> </head> <body> <table align="center" width="600" height="100%" border="0" cellspacing="0" cellpadding="30"> <tr><td class="tt1"> 本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります。 </td></tr> </table> </body> </html> （宣言とmetaは省略）これで画面を縦に3分割したレイアウトで真ん中の色のついたエリアに文字や写真を入れていくフォーマットになります。しかしW3Cによる定義では厳密にはtableの「align」と「height」は非推奨になっているようなのです。そこで、cssで指定しようと思うのですが、tableを左右方向で常にセンターに配置するのと、真ん中の色の部分を画面下にぴったりくっつけるのがどうやってもできません。どなかかヒントでも結構なのでいただけませんでしょうか・・・

82w82
お礼率97% (794/812)

HTML
回答数3
ありがとう数5

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

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

ベストアンサー

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

2006/12/13 13:55 回答No.1

こういう単純なレイアウトなら、CSSですべきですよ。複雑なレイアウトで、どうしてもCSSではやりにくいって時はtable要素も使っても仕方ないかな、とは思いますけど。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css">  </style> </head> <body> <div id="container">ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ。</div> </body> </html> text-align: center;は本来不要ですが、古いバージョンのIEのバグ配慮。及びDOCTYPE宣言で必ず標準準拠モードにしないと、IE6ではバグの為、本来margin-left: auto; margin-right:auto;でセンタリングされるべきなのが、センタリングされませんので。検証してないけどこれでうまくいく・・と思います。

質問者

お礼 2006/12/13 14:57

早速ありがとうございます。先日もDOCTYPE宣言の件で教えていただいた方ですよね。左右のマージンを:auto;にするというのはいろんな解説サイトを読みましたが書いてませんでしたので、教えていただいて非常にありがたいです。ただ、書いていただいたソースを丸ごとコピーして検証してみたのですが（WinXP:IE6・Firefox2.0）、標準準拠モード（URLつき）では左右のセンターになりますが、下にくっつきません。また後方互換モードでは下にはくっつきますがセンターにならず左に寄ってしまいます。両方を実現するのは無理なんでしょうか？？？

その他の回答 (2)

quads
ベストアンサー率35% (90/257)

2006/12/13 23:53 回答No.3

> しかし標準準拠モードだとIE5とか古いブラウザで正しく表示されるのでしょうか。特にMacの人とか。この程度のレイアウトであれば、Valid CSS で想定される全てのWWWブラウザに対するクロスブラウザは実現可能です。より厳密な指定に対してクロスブラウザを実現したいのであれば製作者に相当の知識がないと難しいかもしれません。製作段階で不具合に繋がる指定を施す可能性があります。

質問者

お礼 2006/12/14 13:58

すいません、Valid CSS という言葉も始めて知ったのですが、「正しい」とか「正確な」CSSという解釈でいいのでしょうか。ということは、真っ当な間違いのないCSSを書けば古いブラウザやMacの人でも問題ないということですね。下記で教えていただいたソースでアップしてみて、知人に環境の違いで表示がどうなるか確認してみます。

goldfox
ベストアンサー率49% (123/249)

2006/12/13 15:45 回答No.2

下記プロパティを付け加えましょう。 > 標準準拠モード（URLつき）では左右のセンターになりますが、下にくっつきません。 html,body{height:100%;} > また後方互換モードでは下にはくっつきますがセンターにならず左に寄ってしまいます。 body{text-align:center;} #containerの中身を左寄せにしたいなら #containerのtext-align: center;をleftに。

質問者

お礼 2006/12/13 17:35

できました！！ html,body{height:100%;}なんてまったく思いつきもしませんでした。ありがとうございました！しかし標準準拠モードだとIE5とか古いブラウザで正しく表示されるのでしょうか。特にMacの人とか。知り合いの中には案外古い環境の人も多いですから、できれば新旧のブラウザでも確実に崩れずに見れるのが望ましいのですが、そこまで多くを望むのは無茶でしょうか・・・

関連するQ&A

スタイルシートでの中央揃え
<html> <head> <title>文書のタイトル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style> body{text-align: center;} </style> </head> <body> <table> <tr> <td> テーブルの内容 </td> </tr> <table> テーブル外の内容 </body> </html> のように、スタイルシートで、 body{text-align: center;} を指定したのですが、IE6ではtableが中央揃えされましたが、NN7.1やFirefox 1.5.0.7ではtableが中央揃えされませんでした。 centerタグを使えば問題ありませんでしたが、非推奨なのであまり使いたくありません。スタイルシートを用いてIE6と同様にNNやFirefoxでtableを中央揃えするようにするにはどうすればいいでしょうか。
- ベストアンサー
- HTML
テーブルの中央配置
内容を中央揃えにしたく、以下のようにCSSで記述してみたのですが、テーブルが揃いません。どうすればよいのでしょうか？ <head> <style type="text/css" media="screen"></style> </head> <html> <body> aaa <table width="64" border="1" cellspacing="2" cellpadding="0"> <tr> <td>bbb</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
operaだとテーブルがなくなります
operaだテーブルがなくなります IEだと問題なく表示されるのにだれか助けてください style.css　　　body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; 　width:100%; height:10%　　 }　　 .midori{background-color:#999933; width:100%; height:3.3%　 } 　　　　　　　ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですがどうしてでしょうか
- ベストアンサー
- HTML
テーブルの中の文字もスタイルシートで設定するには
<html> <head> <title>test</title> <STYLE TYPE="text/css">  </STYLE> </head> <body> <h1> あああ <br> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> </h1> </body> </html> これだとブラウザで見た時にテーブルの外の文字しか適用されていませんがテーブルの中まで範囲は及ばないのでしょうか？テーブルの中はテーブルの中専用のタグを作らないとダメでしょうか？テーブルの外の文字と全く同じにしたいので一気に指定したいです。
- ベストアンサー
- HTML
cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですがスタイルシートで行いたいです。そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
スタイルシートについて
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><IMG src="i1.gif" width="64" height="64" border="0"></TD> <TD><IMG src="i2.gif" width="64" height="64" border="0"></TD> </TR> <TR> <TD><IMG src="m1.gif" width="32" height="32" border="0"></TD> <TD><IMG src="m2.gif" width="32" height="32" border="0"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> こういったTableを使った表がある場合、スタイルシートで示すことは出来ますか？もし出来るならそのソースを教えてください。また、こういったTableのホームページを一括でスタイルシートに変換できるソフトが存在していたら教えてください。それと、この行数がかなり大きくなると、Tableよりも軽く表示がされると聞いたのですが本当でしょうか？ご返答、何卒、よろしくお願い致します。
- ベストアンサー
- HTML
CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？教えてください☆
- ベストアンサー
- HTML
TABLE内のTABLEのHEIGHT属性が利かない
TABLEの中にTABLEを入れ子にしてHTMLを作ったのですが、外のTABLEのHEIGHTを変動にして、内のTABLEのHEIGHTを100%にしてもHEIGHTがくっつきません。検証したところ、IE5.0(Mac)は利くようですが、IE5.5(Win)は100%が利きません。そういう仕様なのでしょうか？しょうがないのでしょうか？それともCSSで解決できるものでしょうか？ご存じの方いらっしゃいましたらご教授ください。参考に、ソースをご覧ください。 <HTML> <HEAD> <TITLE>SAMPLE</TITLE> </HEAD> <BODY> <TABLE WIDTH="600" HEIGHT="600"> <TR> <TD> <TABLE WIDTH="500" HEIGHT="100%"> <TR> <TD>SAMPLE</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
スタイルシートのテーブル枠について
今までテーブルを利用してホームページに簡単な線をつけていました。これをスタイルシートで行うと微妙にうまくできません・・・お助けください。すべてＩＥで検査しております。 html従来の私の線の引き方 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#000000"> <img src="sps.gif" width="600" height="1"> </td> </tr> </table> 上記の表現をスタイルシートを利用してやりたいのですが線が１pxのはずが、大きくなってしまいます。 cssを利用した記述 css部分 .index_table{ width: 600px; border:0px; border-width: 0px; margin: 0px; padding: 0px; } html部分 <table class="index_table"> <tr> <td bgcolor="#000000"> <img　src="ims/sps.gif" width="600"　height="1"> </td> </tr> </table> これに似たいい方法は、ないでしょうか？質問が、うまくまとまってなくてすみません・・・
- ベストアンサー
- HTML
外部スタイルシートがテーブル内に効かない
外部スタイルシートの設定が、テーブル内には効きません。特に、フォントや行間を効かせたいのですが、どうしたらいいのでしょうか。以下、大雑把ですが。 #main { float: none; margin-left: 132px; line-height: 1,5em; margin-top : 50px; } #main td, th { line-height: 1,5em; } と外部スタイルシートで指定していて、 <DIV id="main"> <TABLE cellpadding="10" background="image/003-002.gif" style="filter:Alpha(opacity=75);"> <TBODY> <TR> <TD> <H3>内容</H3> </TD> </TR> </TBODY> </TABLE> というようなテーブルを書きました。テーブルがなければ、スタイルシートは効きます。初歩的な質問だとは思うのですが、テーブル内に行間などを設定する方法をお願いいたします。
- ベストアンサー
- HTML

スタイルシートでtableをセンター配置