テーブル内の文字位置
テーブル（表）の中の文字の位置を指定する
align属性でセル内の水平位置、valign属性でセル内の垂直位置を指定します。valign は vertical-align(ヴァーティカル・アライン)の略です。
水平方向の文字位置
align="left" 文字を左寄せ
align="center" 文字を中央揃え
align="right" 文字を右寄せ
何も設定しなかった時の デフォルメは左揃えになります。 <table width="100%" border="1">
<tr>
<td align="left" >ここに文字</td>
<td align="center">ここに文字</td>
<td align="right">ここに文字</td>
</tr>
</table>
align="center" 文字を中央揃え
align="right" 文字を右寄せ
何も設定しなかった時の デフォルメは左揃えになります。 <table width="100%" border="1">
<tr>
<td align="left" >ここに文字</td>
<td align="center">ここに文字</td>
<td align="right">ここに文字</td>
</tr>
</table>
| 左寄せ | 中央揃え | 右寄せ |
垂直方向の文字位置
valign="top" 文字を上の位置に
valign="middle" 文字を中央に
valign="bottom" 文字を下の位置に
何も設定しなかった時の デフォルメは中央の位置になります。 <table width="50%" border="1">
<tr>
<td valign="top">文字は上の位置</td>
</tr>
<tr>
<td valign="middle">文字は中央</td>
</tr>
<tr>
<td valign="bottom">文字は下の位置</td>
</tr>
</table>
valign="middle" 文字を中央に
valign="bottom" 文字を下の位置に
何も設定しなかった時の デフォルメは中央の位置になります。 <table width="50%" border="1">
<tr>
<td valign="top">文字は上の位置</td>
</tr>
<tr>
<td valign="middle">文字は中央</td>
</tr>
<tr>
<td valign="bottom">文字は下の位置</td>
</tr>
</table>
| 文字は上の位置 |
| 文字は中央 |
| 文字は下の位置 |
テーブル内のすべての文字位置
<td align="文字位置水平方向(横)" valign="文字位置垂直方向(縦)">| 左上 align="left" valign="top" |
中央上 align="center" valign="top" |
右上 align="right" valign="top" |
| 左中 align="left" valign="middle" |
中央 align="center" valign="middle" |
右中 align="right" valign="middle" |
| 左下 align="left" valign="bottom" |
中央下 align="center" valign="bottom" |
右下 align="right" valign="bottom" |
<table width="100%" border="1">
<tr>
<td align="left" valign="top">左上</td>
<td align="center" valign="top">中央上</td>
<td align="right" valign="top">右上</td>
</tr>
<tr>
<td align="left" valign="middle">左中</td>
<td align="center" valign="middle">中央</td>
<td align="right" valign="middle">右中</td>
</tr>
<tr>
<td align="left" valign="bottom">左下</td>
<td align="center" valign="bottom">中央下</td>
<td align="right" valign="bottom">右下</td>
</tr>
</table>
<tr>
<td align="left" valign="top">左上</td>
<td align="center" valign="top">中央上</td>
<td align="right" valign="top">右上</td>
</tr>
<tr>
<td align="left" valign="middle">左中</td>
<td align="center" valign="middle">中央</td>
<td align="right" valign="middle">右中</td>
</tr>
<tr>
<td align="left" valign="bottom">左下</td>
<td align="center" valign="bottom">中央下</td>
<td align="right" valign="bottom">右下</td>
</tr>
</table>
テーブル枠線の種類 かわいい点線 CSSボーダースタイル CSSボーダー CSSテーブル
★skip ページtop
