【超初心者】CSSでtable（表）の中央寄せができない！

CSSでtable（表）の中央寄せができない原因

• CSSの「margin」を指定している。
• 指定の仕方が間違っている。

table（表）の中央寄せをする方法

以下、table（表）の中央寄せの例を示します。

<div style="overflow-x:auto">
<table width="800" align="center">
<tr align="center" bgcolor="#EDDEFF">
<td align="center"></td>
<td align="center"></td>
</tr>
<tr align="center">
<td></td>
<td></td>
</tr>
<tr align="center">
<td></td>
<td></td>
</tr>

（中略）

</table>
</div>

この例では、1行目で、スライドバーが出るようにしてあります。これがあると、スマホでも、うまく表示されます。

2行目では、幅を指定しています。この値を表の幅に合わせて、変えてください。幅は、指定しなくても、うまく表示される場合が多いですが、指定した方が、安心です。

表の中の文字も、中央寄せになると思います。

CSSでtable（表）の中央寄せができない場合の対処方法

「margin」の指定

CSSファイルやhtmlファイルのどこかで、marginをしていると、上記の方法では、うまくいかなくなります。

その場合には、以下のように、指定しましょう。

<style>
    #example{
        margin: auto;
    }
</style>
<table id="example" border="1">
    <tr><td>左上</td><td>右上</td></tr>
    <tr><td>左下</td><td>右下</td></tr>
</table>

豆知識

• CSSの指定がうまくいかない場合には、もっと根本的なところの指定が、影響していることがあります。「body」のところなどに、よく分からずに書いている部分があったら、削除してみましょう。今回なら、「margin」の記述です。

免責事項・著作権表示