ホーム(記事一覧)へ

html・CSSでtableを位置調整する方法(右寄せなど)

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

html・CSSでtableを位置調整する方法を解説します。

【htmlで中央寄せ】align="center"

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

テキスト テキスト

下のテキスト

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

下のテキストはちゃんと下になります。

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

【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:auto

CSSでtableを中央寄せするにはmargin:autoを指定します。

テキスト テキスト

下のテキスト

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

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

下のテキストはちゃんと下になります。

【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="center"
  • 【htmlで右寄せ】align="right"
  • 【CSSで中央寄せ】margin:auto
  • 【CSSで右寄せ】margin-left:auto

以上、html・CSSでtableを位置調整する方法でした。

関連記事