web-dev-qa-db-ja.com

「テーブル」をWebページの中央に配置する方法は？

ウェブページの中央/中央に配置する非常に基本的なテーブル構造があります。私は以下のコードを持っていますが、これを実現するのは不完全です。HTML部分の構造が下手なので、私を助けてください

<div align="center" style="vertical-align:bottom">
<div align="center" style="vertical-align:bottom">
<table>
<tr><td colspan="2"></td></tr>
<tr><td>Name</td><td>J W BUSH</td></tr>
<tr><td>Proficiency</td><td>PHP</td></tr>
<tr><td>COmpany</td><td>BLAH BLAH</td></tr>
</table>
</div>
</div>

また、この構造化の時期を達成するためのプロパティとCSSの適用の背後にある概念について説明してください。さらに学習に使用できるように...

私はHTML-CSSの使用にまったく慣れていないので、私はHTML-CSSの構造化についての私の愚かな質問に耐えるように、すべての技術者とギークにお願いします。 「宿題ですか...」や「授業に行く」など...

htmlcsswebpage
5
OM The Eternity

最短かつ最も簡単な答えは、Webページの縦方向の中央に配置しないことです。 HTMLとCSSは単にそれを念頭に置いて作成されていません。これらはテキスト形式の言語であり、ユーザーインターフェイス設計言語ではありません。

そうは言っても、これは私が考えることができる最良の方法です。ただし、これはInternet Explorer 7以下では機能しません。

<style>
  html, body {
    height: 100%;
  }
  #tableContainer-1 {
    height: 100%;
    width: 100%;
    display: table;
  }
  #tableContainer-2 {
    vertical-align: middle;
    display: table-cell;
    height: 100%;
  }
  #myTable {
    margin: 0 auto;
  }
</style>
<div id="tableContainer-1">
  <div id="tableContainer-2">
    <table id="myTable" border>
      <tr><td>Name</td><td>J W BUSH</td></tr>
      <tr><td>Proficiency</td><td>PHP</td></tr>
      <tr><td>Company</td><td>BLAH BLAH</td></tr>
    </table>
  </div>
</div>
12
Peter

これを試して ：

<style type="text/css">
        .myTableStyle
        {
           position:absolute;
           top:50%;
           left:50%; 

            /*Alternatively you could use: */
           /*
              position: fixed;
               bottom: 50%;
               right: 50%;
           */


        }
    </style>
10
Chlebta