1. Home
  2. HTMLタグ
  3. テーブルタグ
  4. セル内の文字の位置を指定する

セル内の文字の位置を指定する


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


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の指定について】

複数行に渡る長いテキストの場合に、各行(最終行を除く)の右端が綺麗に揃うように単語間隔が自動的に調整されます。(英文などの場合に有効のようです)

【ベースラインについて】

英文などの場合、例えば xy では下辺の位置が異なります。

[ベースラインの表示例]

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>

表示例

上揃え 中央揃え 下揃え

テーブルタグ

ページの先頭へ