ベストアンサー

テーブルをウィンドウのセンターに

2006/04/07 01:03

700px*400pxぐらいのテーブルを、ウィンドウの大きさにかかわらず上下左右ともにセンターに配置するには、どのようなコードを書けばいいのでしょうか？左右はセンター配置になるのですが上下が。。。できればHTMLでお願いします。m(_ _)m また、テーブルの位置（上下左右センター）をCSSで指定できるのでしょうか？よろしくお願いしマス。

sachisachi99
お礼率70% (7/10)

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

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

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2006/04/07 11:29 回答No.3

windowがテーブルより小さい場合どうするかまたテーブルはそれだけの表示なのか、それとも後にさらに文書がつづくのかなど仕様がわからないとどうしようもないですよね。単純にウィンドウの真中ということなら全体のwindowの表示範囲がinnerHeightなので、そこからtableの高さを引いて、半分にした数値を起点にテーブルを書けば真中になりますね。テーブルの高さを300固定だと考えれば以下のような感じでかけます。 <head> <script language=javascript> function onloadFunc(){ var h=self.innerHeight var tabletop=0; if(h>=300) tabletop=(h-300)/2; document.getElementById('t1').style.top=tabletop; } </script> </head> <body onLoad="onloadFunc()" onResize="onloadFunc()"> <table width=700 height=300 style="position:relative;" border=1 id="t1"> <tr><td>test</td></tr></table> </body>

質問者

お礼 2006/04/08 02:42

ごめんなさい言葉足らずでした。 windowは700px*400pxは最悪下回らないと勝手に決め付けて作ってました(笑) このテーブル内に全コンテンツを収めます。この発想をCSSで試しましたらセンターにきました！ただブラウザ間で表現が変わるので、コードのせいかわたしのせいか勉強します↓ ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

noname#20378

2006/04/07 08:31 回答No.2

可能です。 CSSの方が容易だと思いますが・・・・ #文字コードをUTF-8またはUTF-16にそろえる必要が出てきます <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link rel="stylesheet" href="himajin.css" type="text/css" /> <title>MIDI再生実験</title> </head> <body> <h1>Table要素の中央揃え実験</h1> <table> <caption>値段一覧</caption> <thead> <tr><th>商品名</th><th>値段</th></tr> </thead> <tbody> <tr><td>りんご</td><td>150円</td></tr> <tr><td>みかん</td><td>200円</td></tr> </tbody> </table> </body> </html> /*=========himajin.css===========*/ @charset "UTF-8"; table,th,td{ border:solid 1px; /* 判りやすくするためにテーブルに枠をつける */ } table{ margin:auto; /*中央揃え*/ } /*himajin.cssのソース終了*/ >で、何故か横方向の位置指定はできるのですが Mozillaでは対応していないみたいです。逆です。IEの挙動が変なんです先日回答した質問2071415をご覧ください http://oshiete1.goo.ne.jp/kotaeru.php3?q=2071415

質問者

お礼 2006/04/08 02:35

お返事ありがとうございます。 CSSの方がいい感じですね。描画がものすごく速くなりました。 Firefoxで表示するとレイアウトがくずれちゃいました↓まだまだ勉強が足りません。。がんばります。

ログインすると、全ての回答が全文表示されます。

noname#24751

2006/04/07 02:38 回答No.1

はじめまして。ちょっと強引?なんですが… <html> <body> <table width="100%" height="100%"> <tr> <td align="center" valign="middle">  <table width="700" height="400"> <tr> <td> テーブル部 </td> </tr> </table>  </td> </tr> </table> </body> </html> スタイルシートでのテーブル位置指定で、 centerだのmiddleだのはできません。たしか。(←曖昧です) IEだと (テーブルをdivで囲った場合) div{ text-align:center; } で、何故か横方向の位置指定はできるのですが Mozillaでは対応していないみたいです。使わないほうが無難です。あと、position:relative;が通常表示される位置からの相対的な配置、 position:absolute;が親要素に対して絶対的な配置ができますが、いずれも上から○○px、左から○○px、下から○○px、または右から○○pxといった指定しかできません。多分。(←曖昧です)

質問者