<tr align="" valign=""></tr> <td align="" valign=""></td>
<td align="center" valign="top">文字の表示位置を指定</td>
align="" は水平方向、valign="" は垂直方向の指定を行います。
- tr要素に指定した場合 … 属性の指定は、行内の全てにセルに適用されます。
- td要素(th要素)に指定した場合 … 属性の指定は、そのセルにだけ適用されます。
【justifyの指定について】
複数行に渡る長いテキストの場合に、各行(最終行を除く)の右端が綺麗に揃うように単語間隔が自動的に調整されます。(英文などの場合に有効のようです)
【ベースラインについて】
英文などの場合、例えば x と y では下辺の位置が異なります。
x 文字のように、下側にはみ出ていない文字の下辺ラインを、ベースラインといいます。
※日本語の場合はベースラインは存在しません。
この指定内容はスタイルシートで代替することができます。指定方法の詳細は「関連ページ」をご覧ください。
使用例
■left、center、rightの指定例
<table border="3" width="100%">
<tr>
<td height="100">指定なし</td>
<td align="left">左寄せ</td>
<td align="center">中央揃え</td>
<td align="right">右寄せ</td>
</tr>
</table>
表示例
指定なし | 左寄せ | 中央揃え | 右寄せ |
■justifyの指定例
<table border="3" width="100%">
<tr>
<td>英文は単語の区切りで改行が ...</td>
<td align="justify">英文は単語の区切りで改行が ...</td>
</tr>
</table>
表示例
※ブラウザの幅を動かすと違いが分かりやすいです。(IEでは対応していないようです)
英文は単語の区切りで改行が入るため、行末が綺麗に揃わない場合がありますが、justifyを指定しておくと綺麗に揃えることができます。The align attribute specifies the horizontal text alignment. The justify value adjust the spaces between the words to justify both left and right side. | 英文は単語の区切りで改行が入るため、行末が綺麗に揃わない場合がありますが、justifyを指定しておくと綺麗に揃えることができます。The align attribute specifies the horizontal text alignment. The justify value adjust the spaces between the words to justify both left and right side. |
■top、middle、bottomの指定例
<table border="3" width="100%">
<tr>
<td height="100">指定なし</td>
<td valign="top">上揃え</td>
<td valign="middle">中央揃え</td>
<td valign="bottom">下揃え</td>
</tr>
</table>
表示例
指定なし | 上揃え | 中央揃え | 下揃え |
■baselineの指定例(上揃えとの比較)
<table border="3">
<tr valign="baseline">
<td height="100">abcdefg</td>
<td>hijklmn</td>
<td style="font-size: 250%;">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>
<table border="3">
<tr valign="top">
<td height="100">abcdefg</td>
<td>hijklmn</td>
<td style="font-size: 250%;">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>
表示例
abcdefg | hijklmn | opqrstu | vwxyz |
abcdefg | hijklmn | opqrstu | vwxyz |
■tr要素とtd要素に属性を指定した例
<table border="3" width="100%">
<tr align="center">
<td height="100" valign="top">上揃え</td>
<td valign="middle">中央揃え</td>
<td valign="bottom">下揃え</td>
</tr>
</table>
表示例
上揃え | 中央揃え | 下揃え |
- サイト内検索