テーブルの基本　テキストの位置の設定


HTMLタグのページ 　　テーブル中のテキストの位置を設定する（縦の位置と横の位置の設定）


テキストの縦の位置を設定する　<td valign="縦位置">～<td>

テキストの縦位置を設定するには、<td>タグに　 valign="●●"　を組み込む

*　valigin="top"・・・上
*　valigin="middle" ・・・中
*　valign="bottom" ・・・下

タグ
<table width="300" height="100" border="2">
<tr>
<td valign="top" >　上 </td>
<td valign="middle" >　中 </td>
<td valign="bottom" >　下 </td>
</tr>
</table>　


ブラウザの表示
　上 　中 　下


テキストの横位置を設定する　<td align="横位置">～</td>

テキストの横に位置を設定するには　 <td>タグに　align ="●●"を組み込む

*　align="reft"・・・左
*　align="center"・・・中央
*　align="right"・・・右


タグ
<table width="300" border="2">
<tr>
<tdheight="100" align="left" >左 </td>
<tdheight="100" align="center" >中　 </td>
<tdheight="100" align="right" >右 </td>
</tr>
</table>


ブラウザ表示
左 中　 右


縦横を組み合わせる 　 <td valign="縦位置" align="横位置">～</td>

<table width="300" border="2">
<tr>
<td height="100" valign="top" align="left">　上+右</td>
<td height="100" valign="middle" align="left">　中+右</td>
<td height="100" valign="bottom" align="left">下+右</td>
</tr>
<tr>
<td height="100" valign="top" align="center">上+中　</td>
<td height="100" valign="middle" align="center">中+中</td>
<td height="100" valign="bottom" align="center">下+中</td>
</tr>
<tr>
<td height="100" valign="top" align="right">上+右</td>
<td height="100" valign="middle" align="right">中+右　</td>
<td height="100" valign="bottom" align="right">下+右　</td>
</tr>
</table>　


上+右 中+右 下+右
上+中　 中+中 下+中
上+右 中+右 下+右


*　上のテーブルの場合、行に対して横3列が同じalign設定なので、下記のようにタグを書くことが出来る

　<table width="300" border="2">
<tr align="left">
<td height="100" valign="top">　上+右</td>
<td height="100" valign="middle">　中+右</td>
<td height="100" valign="bottom">下+右</td>
</tr>
<tr align="center">
<td height="100" valign="top">上+中</td>
<td height="100" valign="middle">中+中</td>
<td height="100" valign="bottom">下+中</td>
</tr>
<tr align="right">
<td height="100" valign="top">上+右</td>
<td height="100" valign="middle">中+右</td>
<td height="100" valign="bottom">下+右</td>
</tr>
</table>　


　


　


　



© Rakuten Group, Inc.
X

Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: