|
セル内に入るデータの位置を指定してみましょう。
通常 セル内のテキストは左寄せで表示されますが、
align属性を使えば 左寄せ 中央 右寄せを指定することができます。
● 何も指定していない場合は左寄せになります。
|
<table width="300" border="1">
<tr>
<td width="100">mamoho</td>
<td width="100">大輔</td>
<td width="100">奈美</td>
</tr>
</table> |
|
● align="left"と指定しても 同じように表示されます。
|
|
<table width="300" border="1">
<tr>
<td width="100" align="left">mamoho</td>
<td width="100" align="left">大輔</td>
<td width="100" align="left">奈美</td>
</tr>
</table> |
|
● テキストを中央によせるときは align="center"と指定します。
|
|
<table width="300" border="1">
<tr>
<td width="100" align="center">mamoho</td>
<td width="100" align="center">大輔</td>
<td width="100" align="center">奈美</td>
</tr>
</table> |
|
● テキストを右寄せするときは align="right"と指定します。
|
|
<table width="300" border="1">
<tr>
<td width="100" align="right">mamoho</td>
<td width="100" align="right">大輔</td>
<td width="100" align="right">奈美</td>
</tr>
</table> |
|
今度は セルが縦に広いときの指定方法です。
通常では セルが縦に広い場合 テキストは中段に設定されますが、
valignの属性を指定すると 上 中段 下 に指定することができます。
今回は テーブルの高さを 200ピクセルに設定しました。
● 何も指定していない場合は テキストは中段に設定されます
|
|
<table width="300" height="200" border="1">
<tr>
<td width="100">mamoho</td>
<td width="100">大輔</td>
<td width="100">奈美</td>
</tr>
</table> |
|
● valign="middle" と指定しても テキストは中段に設定されます
|
|
<table width="300" height="200" border="1">
<tr>
<td width="100" valign="middle">mamoho</td>
<td width="100" valign="middle">大輔</td>
<td width="100" valign="middle">奈美</td>
</tr>
</table> |
|
● テキストを上に設定したい場合は valign="top" と指定します。
|
|
<table width="300" height="200" border="1">
<tr>
<td width="100" valign="top">mamoho</td>
<td width="100" valign="top">大輔</td>
<td width="100" valign="top">奈美</td>
</tr>
</table> |
|
● テキストを下に設定したい場合は valign="bottom" と指定します。
|
|
<table width="300" height="200" border="1">
<tr>
<td width="100" valign="bottom">mamoho</td>
<td width="100" valign="bottom">大輔</td>
<td width="100" valign="bottom">奈美</td>
</tr>
</table> |
|
|
