【html/CSS】tableを右寄せする方法

「tableを右寄せするにはどうするんだろう？htmlだけでできるかな？」

html･CSSでtableを右寄せする方法を解説します。

tableを中央寄せする方法はこちら↓

【htmlで右寄せ】align="right"

htmlだけでtableを右寄せするにはalign属性にrightを指定します。

<table align="right" border="1">
    <tr>
        <td>テキスト</td>
        <td>テキスト</td>
    </tr>
</table>
<p>下のテキスト</p>

下のテキストは左に入ります。

「align="right"」はCSSのfloat:rightの特性をもっているためです。

htmlだけでも右寄せできますが、html5からはCSSでできることはCSSで指定するように推奨されています。その方法は後述します。

【CSSで右寄せ】margin-left:auto

CSSでtableを右寄せするにはmargin-left:autoを指定します。

<style>
.example2{
    margin-left: auto;
}
</style>
<table border="1" class="example2">
    <tr>
        <td>テキスト</td>
        <td>テキスト</td>
    </tr>
</table>
<p>下のテキスト</p>

margin-leftは要素の左の空間を指定するCSSです。

これをautoにすることで左に空間ができ、tableが右に寄せられるというものです。

divなどにmargin: autoを指定するときはwidthの指定が必須ですがtableについてはwidthの指定は不要です。

align="right"とは違い、下のテキストはちゃんと下になります。

【まとめ】tableを右寄せする方法

【htmlで右寄せ】align="right"

【CSSで右寄せ】margin-left:auto

以上、html･CSSでtableを右寄せする方法でした。