【html/CSS】table,tdのalign属性の使い方【効かないときの対処法】

tableの位置調整といえばalignです。

「tableにalign指定したのに動かないよ～！？」

tableとtdのalignの使い方とalignが効かないときの対処法を解説します。

align属性は廃止

html5ではtableに限らずalign属性は廃止となっています。

それでもalign属性使いたい方は下記を、CSSを使いたい場合は「align属性の代替CSS」から読んでください。

align属性は位置調整する

align属性は位置調整するhtml属性です。

tableに指定するとtable自体の位置調整、

tdに指定するとtdの子孫要素の位置調整をします。

tableにおけるalign="right"とalign="left"はCSSのfloatと同じ効果があり、弟要素を回り込ませる特徴があります。

【中央寄せ】align="center"

<table border="1" align="center">
    <tr>
        <td align="center" width="200">1つめ</td>
        <td>2つめ</td>
    </tr>
</table>
<div>下に続く文字</div>

【右寄せ】align="right"

<table border="1" align="right">
    <tr>
        <td align="right" width="200">1つめ</td>
        <td>2つめ</td>
    </tr>
</table>
<div>下に続く文字</div>

【左寄せ】align="left"

<table border="1" align="left">
    <tr>
        <td align="left" width="200">1つめ</td>
        <td>2つめ</td>
    </tr>
</table>
<div>下に続く文字</div>

align属性の代替CSS

table自体の位置調整をするにはmargin(-left):auto、

tdの子孫要素の位置調整をするにはtext-alignを使います。

厳密にはtableの「align="right"」は「float:right」、「align="left"」は「float:left」ですが、floatは下に続く文字が回り込んでしまい使いづらいため、「margin-right(-left):auto」をおススメします。

【table中央寄せ】margin:auto

<style>
.example{
    margin: auto;
}
</style>
<table class="example" border="1">
    <tr>
        <td>1つめ</td>
        <td>2つめ</td>
    </tr>
</table>
<div>下に続く文字</div>

【table右寄せ】margin-left:auto

<style>
.example2{
    margin-left: auto;
}
</style>
<table class="example2" border="1">
    <tr>
        <td>1つめ</td>
        <td>2つめ</td>
    </tr>
</table>
<div>下に続く文字</div>

【table左寄せ】margin-right:auto

<style>
.example3{
    margin-right: auto;
}
</style>
<table class="example3" border="1">
    <tr>
        <td>1つめ</td>
        <td>2つめ</td>
    </tr>
</table>
<div>下に続く文字</div>

【td中央寄せ】text-align:center

<style>
.example4{
    text-align: center;
    width: 200px;
}
</style>
<table border="1">
    <tr>
        <td class="example4">1つめ</td>
        <td>2つめ</td>
    </tr>
</table>

【td右寄せ】text-align:right

<style>
.example5{
    text-align: right;
    width: 200px;
}
</style>
<table border="1">
    <tr>
        <td class="example5">1つめ</td>
        <td>2つめ</td>
    </tr>
</table>

【td左寄せ】text-align:left

</table><style>
.example6{
    text-align: left;
    width: 200px;
}
</style>
<table border="1">
    <tr>
        <td class="example6">1つめ</td>
        <td>2つめ</td>
    </tr>
</table>

tableのalign属性が効かないとき

tableとtdで効果が違う

tableに指定するとtable自体の位置調整、

tdに指定するとtdの子孫要素の位置調整をします。

td内のテキストの位置調整をしたいのにtableだけにalignを指定しても効かないので注意しましょう。

CSSが設定されている

html属性は同じ効果のCSSが設定されている場合、CSSのほうが優先されます。

下記はalign="center"をして言いますが、CSSのfloat: leftによって左寄せになっている例です。

<style>
.example7{
    float: left;
}
</style>
<table align="center" class="example7" border="1">
    <tr>
        <td>1つめ</td>
        <td>2つめ</td>
    </tr>
</table>

この場合CSSで位置調整をするか削除しましょう。

幅が親と同じ

位置調整するにも調整する隙間がなければ移動のしようがありません。

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

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

widthを指定するなど親より幅を小さくしましょう。

スペルミス・ケアレスミス

「align」は「アライン」と読みます。発音しない「g」を忘れがちです。

スペルミスをしていないか確認しましょう。

その他ケアレスミスの可能性もあります。下記を参考に見直してみてください。

【まとめ】tableのalignの使い方

tableに指定するとtable自体の位置調整、

tdに指定するとtdの子孫要素の位置調整をする。

• 【中央寄せ】align="center"
• 【右寄せ】align="right"
• 【左寄せ】align="left"

ただしalign属性は廃止

align属性の代替CSS

table

• 【中央寄せ】margin:auto
• 【右寄せ】margin-left:auto
• 【左寄せ】margin-right:auto

td

• 【中央寄せ】text-align:center
• 【右寄せ】text-align:right
• 【左寄せ】text-align:left

tableのalignが効かないとき

• tableとtdで効果が違う
• html属性は同じ効果のCSSが設定されている場合、CSSのほうが優先される
• 幅が親と同じで移動できない
• スペルミス・ケアレスミス

以上、tableのalignの使い方でした。