ホームへ

【html/CSS】table,tdの文字を上寄せ、中央寄せ、下寄せする方法

tableは表として使うことができます。

しかし、通常文字が縦中央寄せになってしまいます。

table,tdの文字を上寄せ、中央寄せ、下寄せする方法を解説します。

【html】tdにvalign属性

tdにhtml属性の「valign="top"」で上寄せ、「valign="bottom"」で下寄せになります。

ちなみに「valign="middle"」で中央寄せです。

【上寄せ】valign="top"

テキスト テキスト
テキスト
テキスト
<table border="1" >
    <tr>
        <td valign="top">テキスト</td>
        <td>テキスト<br>テキスト<br>テキスト</td>
    </tr>
</table>

【下寄せ】valign="bottom"

テキスト テキスト
テキスト
テキスト
<table border="1" >
    <tr>
        <td valign="bottom">テキスト</td>
        <td>テキスト<br>テキスト<br>テキスト</td>
    </tr>
</table>

valignは上寄せしたいtdすべてに指定する必要があります。

よってセルが多くなるとメンドウになります。

また、valignはhtml5では廃止されています。

下記のCSSで上寄せ、下寄せする方法を使いましょう。

【CSS】tdにvertical-align

tdにCSSの「vertical-align:top」で上寄せ、「vertical-align:bottom」で下寄せになります。

ちなみに「vertical-align:middle」で中央寄せです。

【上寄せ】vertical-align:top

テキスト テキスト
テキスト
テキスト
<style>
.example td{
    vertical-align: top;
}
</style>
<table border="1" class="example">
    <tr>
        <td>テキスト</td>
        <td>テキスト<br>テキスト<br>テキスト</td>
    </tr>
</table>

【下寄せ】vertical-align:bottom

テキスト テキスト
テキスト
テキスト
<style>
.example2 td{
    vertical-align: bottom;
}
</style>
<table border="1" class="example2">
    <tr>
        <td>テキスト</td>
        <td>テキスト<br>テキスト<br>テキスト</td>
    </tr>
</table>

【まとめ】tableの文字を上下寄せする方法

htmlCSS
上寄せvalign="top"vertical-align:top
中央寄せvalign="middle"vertical-align:middle
下寄せvalign="bottom"vertical-align:bottom

以上、table,tdの文字を上寄せ、中央寄せ、下寄せする方法でした。

マンガで読める関連記事