101

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

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

ただし、VisualStudio2008では次の行に警告が表示されます。

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

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

4

10 に答える 10

192

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

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>
于 2008-11-19T06:28:04.717 に答える
19

これを試して：

<table width="200" style="margin-left:auto;margin-right:auto">
于 2008-11-19T06:27:05.203 に答える
2

単純。IE6 以降では、"margin: 0 auto;" を使用してテーブルを中央に配置できます。ページが「標準」モードでレンダリングされる場合のみ。これを実現するには、次のような有効な 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 以下のユーザーは、見慣れない Web サイトにかなり慣れていると思いますが、これらの視覚的な不具合によってサイトが使用不能にならないようにする必要があります。

ハッピーコーディング！

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
于 2008-11-19T21:05:22.763 に答える
0

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

于 2009-10-02T02:36:49.350 に答える
0 
style="text-align:center;"

（おもう）

またはあなたはそれを無視することができます、それはまだ機能します

于 2008-11-19T06:22:08.833 に答える
0

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

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>
于 2008-11-19T06:30:21.467 に答える
0 
<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
于 2013-12-19T09:50:24.067 に答える