web-dev-qa-db-ja.com

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

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

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

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

属性「align」は古くなっていると見なされます。新しい構成が推奨されます。

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

htmlcssalignmentcss-tables
92
Alexander Prokofyev

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

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

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

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

エレガントなCSSクロスブラウザソリューション：これは、MSIE 6（Quirks and 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>
180
VonC

これを試して：

<table width="200" style="margin-left:auto;margin-right:auto">
14
jalbert

シンプル。 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">
2
Ola Tuvesson

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

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

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

驚くべきことに、すべてをBODYエリアに集中させたい場合は、標準を使用するだけです

text-align: center;

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

2
Mark Manning
style="text-align:center;"

（おもう）

またはあなたはそれを単に無視することができます、それはまだ動作します

0
Steven A. Lowe

これは動作するはずです：

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>
0
Matt Howell
<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
0
Chandra Shekhar Sharma

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

0
sean

基本的には、

<table align="center">
...

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

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

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

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

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

0
Gourav Goutam

Divスタイルに追加します。

width: fit-content;
0
Khaled Mohab