CSS テーブルのセルの中身を文字寄せする方法
テーブルのセルの中身を文字寄せする方法を紹介します。
文字寄せするスタイルはtext-alignやvertical-alignを使用しますが、テーブルのセルの場合でも同じように指定します。
以下のようなテーブルがあるとします。文字寄せの設定をしていないデフォルトの状態になります。
<table border="1">
<colgroup span="2" style="width: 200px;">
<tr style="height: 50px;">
<td>りんご</td>
<td>3</td>
</tr>
<tr style="height: 50px;">
<td>みかん</td>
<td>5</td>
</tr>
</table>水平方向の文字寄せ
text-alignのスタイルで、水平方向（左右）の文字寄せを指定できます。
- left
- 左寄せ
- center
- 中央寄せ
- right
- 右寄せ
セル要素（td）にこのスタイルを指定します。
<table border="1">
<colgroup span="2" style="width: 200px;">
<tr style="height: 50px;">
<td style="text-align: left;">りんご</td>
<td style="text-align: right;">3</td>
</tr>
<tr style="height: 50px;">
<td style="text-align: center;">みかん</td>
<td>5</td>
</tr>
</table>垂直方向の文字寄せ
vertical-alignのスタイルで、垂直方向（上下）の文字寄せを指定できます。
- top
- 上寄せ
- middle
- 中央寄せ
- bottom
- 右寄せ
セル要素（td）にこのスタイルを指定します。
<table border="1">
<colgroup span="2" style="width: 200px;">
<tr style="height: 50px;">
<td style="vertical-align: top;">りんご</td>
<td style="vertical-align: middel;">3</td>
</tr>
<tr style="height: 50px;">
<td style="vertical-align: bottom;">みかん</td>
<td>5</td>
</tr>
</table>