- ベストアンサー
テーブルをウィンドウのセンターに
700px*400pxぐらいのテーブルを、ウィンドウの大きさにかかわらず上下左右ともにセンターに配置するには、どのようなコードを書けばいいのでしょうか？ 左右はセンター配置になるのですが上下が。。。 できればHTMLでお願いします。m(_ _)m また、テーブルの位置（上下左右センター）をCSSで指定できるのでしょうか？ よろしくお願いしマス。
- sachisachi99
- お礼率70% (7/10)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （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>
その他の回答 (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
お礼
お返事ありがとうございます。 CSSの方がいい感じですね。描画がものすごく速くなりました。 Firefoxで表示するとレイアウトがくずれちゃいました↓まだまだ勉強が足りません。。がんばります。
はじめまして。 ちょっと強引?なんですが… <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といった指定しかできません。多分。(←曖昧です)
お礼
ありがとうございます！確かにできました＠ ただ私の作ったテーブルのせいなんですけど、描画時にややモッサリ感が否めず。。CSSで挑んでみます！
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ごめんなさい言葉足らずでした。 windowは700px*400pxは最悪下回らないと勝手に決め付けて作ってました(笑) このテーブル内に全コンテンツを収めます。 この発想をCSSで試しましたらセンターにきました！ ただブラウザ間で表現が変わるので、コードのせいかわたしのせいか勉強します↓ ありがとうございました。