<tr align="" valign=""></tr> <td align="" valign=""></td>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 ---
要素

tr要素、td要素、th要素に align=""、valign="" を追加すると、セル内の文字の位置を指定できます。


<td align="center" valign="top">文字の表示位置を指定</td>

align="" は水平方向、valign="" は垂直方向の指定を行います。

属性 値 説明
align="" left 左寄せで表示 （td要素の初期値）
center 中央揃えで表示 （th要素の初期値）
right 右寄せで表示
justify 両端揃えで表示
valign="" top 上揃えで表示
middle 中央揃えで表示 （初期値）
bottom 下揃えで表示
baseline 1行目をベースラインで揃える
  • 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>
表示例
英文は単語の区切りで改行が入るため、行末が綺麗に揃わない場合がありますが、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.
  • ブラウザの幅を動かすと違いが分かりやすいです。（IEでは対応していないようです）
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>
表示例
上揃え 中央揃え 下揃え