CSSでテーブルを水平方向に配置する方法

96

ブラウザウィンドウの中央に固定幅のテーブルを表示したい。今私は

<table width="200" align="center">

しかし、Visual Studio 2008はこの行に警告を出します：

属性 'align'は古いと見なされます。新しい構成をお勧めします。

同じレイアウトを取得するには、どのCSSスタイルをテーブルに適用する必要がありますか？

html  css  alignment  css-tables 
— アレクサンドル・プロコフィエフ
ソース
2
では、最終的にどの解決策をとったのですか？
— Ola Tuvesson、2008年

回答:

183

スティーブンは正しい、理論的には：

CSSを使用してテーブルを中央揃えする「正しい」方法。左と右のマージンが等しい場合、適合ブラウザはテーブルを中央に配置する必要があります。これを実現する最も簡単な方法は、左マージンと右マージンを「自動」に設定することです。したがって、スタイルシートに次のように書くことができます。

table
{ 
    margin-left: auto;
    margin-right: auto;
}

しかし、この回答の冒頭で述べた記事は、表を中央に配置する他のすべての方法を提供します。

エレガントなcssクロスブラウザーソリューション：これは、MSIE 6（QuirksおよびStandards）、Mozilla、Opera、さらにNetscape 4.xの両方で、明示的な幅を設定しなくても機能します。

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>
— VonC
ソース
マージンでテーブルを中央に配置できます：0 auto; IE6以降では、ページに有効なdoctype宣言があることが確認されている場合。
— Ola Tuvesson 2008年
@Marco：現在、この情報はありませんが、StackOverflowに関する質問の良いベースになるかもしれません。
— VonC、
1
あなたは完全に正しいです。TABLEでは、水平方向に中央揃えにするために幅を指定する必要はありません。私はそれをテストしました。DIVは、水平方向の中央揃えを取得するために幅を指定する必要があります。
— Marco Demaio、
2

シンプル。IE6以降では、「マージン：0自動」でテーブルを中央に配置します。ページが「標準」モードでレンダリングされる場合のみ。これを実現するには、次のような有効なdoctype宣言が必要です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

または 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

確かに、IE5.5以前では引き続きテーブルを中央揃えすることを拒否しますが、特にページがまだ機能していて、テーブルが左揃えのままである場合は、それでも問題ありません。今ではIE5.5以下のユーザーは奇妙に見えるウェブサイトにかなり慣れていると思いますが、これらの視覚的な不具合によってサイトが使用できなくなることのないようにする必要があります。

幸せなコーディング！

編集：申し訳ありませんが、IE6を「標準」のレンダリングモードにするには、「厳密な」Doctypeを用意する必要がないことを指摘しておきます。上で投稿したdoctypeの例から、そのように思えるかもしれません。たとえば、このdoctype宣言はもちろん同じように機能します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
— オラトゥベソン
ソース
2

今日の世界では異端かもしれませんが、以前は次の非cssコードを実行しました。これは、今日のブラウザまでのすべてで機能しますが、私が言ったように、今日の世界では異端です。

<center>
<table>
   ...
</table>
</center>

必要なのは、テーブルを中央揃えにしたいことと、その人が古いブラウザを使用していることを伝える方法です。次に、テーブルの周りに「<center>」コマンドを挿入します。それ以外の場合-cssを使用します。

驚いたことに、すべてをBODY領域の中央に配置したい場合は、標準を使用できます。

text-align: center;

cssコマンドと（少なくとも）IE8では、テーブルを含むすべてのものがページの中央に配置されます。

— マーク・マニング
ソース
0

これはうまくいくはずです：

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>
— マットハウエル
ソース
0

私はこれを学んでいるだけで、最終的に私のために働いたのは、最初に3行のテーブルを作成することでした。左右の行のマージンを50％に設定します。次に、中央の「テーブル行」の「テーブルデータ」内に、1行の固定幅テーブルを配置します。

0

基本的には、

<table align="center">
...

ただし、CSSを使用するとより適切な方法で実行できます。これは、Webページに動的な動作を提供し、応答性が高いため、CSSを使用するためのより良いアプローチになります。

  <table style="text-align:center;">

また、ページにテーブルのみを表示する必要がある場合は、以下に示すように、ボディタグの配置のみを使用できます。

 <body style="text-align:center;">
<table>
  ...
</table>

他の提案が必要な場合はお知らせください。きっとこれであなたを助けるでしょう。また、ブートストラップ機能を使用すると、より簡単でインタラクティブになります。

— グーラヴゴータム
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.