ホームへ

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

2021年08月21日

「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やhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【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を右寄せする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ