CSS | テーブルで上寄せや右寄せをする方法
CSSを使ってテーブルのセル内テキストなどの縦方向、横方向の位置を指定して、上寄せ（上揃え）や右寄せなどをする方法とサンプルコードを紹介しています。
テーブルで上寄せや右寄せ等をする
CSSのセル内のテキストなどの位置は「text-align」プロパティで横方向、「vertical-align」プロパティで縦方向の位置を指定する事が可能です。
以下の動作サンプルコードでは、「text-align」、「vertical-align」プロパティで指定可能な値を一覧にしています。
See the Pen CSS | Shade Table background by yochans (@yochans) on CodePen.
<table>
<tr>
<td class="left">text-align: left</td>
<td class="center">text-align: center</td>
<td class="right">text-align: right</td>
<td class="justify">text-align: justify</td>
</tr>
<tr>
<td class="baseline">vertical-align: baseline</td>
<td class="top">vertical-align: top</td>
<td class="middle">vertical-align: middle</td>
<td class="bottom">vertical-align: bottom</td>
</tr>
</table>「text-align」でセル内データの横方向の位置を調節します。
例えば「text-align: right」にて右寄せが可能になっています。
/* text-align */
td.left {
text-align: left;
}
td.center {
text-align: center;
}
td.right {
text-align: right;
}
td.justify {
text-align: justify;
}「vertical-align」でセル内データの縦方向の位置を調節します。
例えば「vertical-align: top」にて上寄せ（上揃え）指定が可能です。
/* vertical-align */
td.baseline {
vertical-align: baseline;
}
td.top {
vertical-align: top;
}
td.middle {
vertical-align: middle;
}
td.bottom {
vertical-align: bottom;
}