align="" valign=""セルの内容の位置を指定

テーブル(表)を構成する各要素(<TR>,<TH>,<TD>,<THEAD>,<TBODY>,<TFOOT>,<COL>,<COLGROUP>)にはalign属性とvalign属性を指定することができます。

これらの属性ではセルの内容が表示される位置を指定することができ、align属性ではセル内の行揃えを、valign属性ではセル内での縦方向の表示位置を変更することができます。 指定できる値については、下記の「属性」の部分に記載していますので、そちらを参考にして下さい。

なおalign属性、valign属性はともに非推奨とはされていませんが、セルの内容の位置についてはできるだけスタイルシートで指定するようにしましょう。 スタイルシートで同様の効果のあるプロパティは「text-align」と「vertical-align」になります。

使用した時の例

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

ブラウザ上の表示例

align=”left” align=”center” align=”right”
valign=”top” 左上 右上
valign=”middle” 中央
valign=”bottom” 左下 右下

属性

align="行揃え" セル内の行揃えの位置を下記から指定
  • left・・・左揃え(tdの初期値)
  • right・・・右揃え
  • center・・・中央揃え(thの初期値)
  • justify・・・両端揃え
  • char・・・指定文字揃え
valign="縦位置" セル内の縦方向の位置を下記から指定
  • top・・・上
  • middle・・・中央(初期値)
  • center・・・中央
  • bottom・・・下
  • baseline・・・横方向の列での1行目のベースライン

対応ブラウザなどのデータ

形式(trの場合) <tr align="" valign="">~</tr> 分類 tr:ブロックレベル要素
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

align属性とvalign属性は、HTML5では廃止。代わりにスタイルシートのtext-alignプロパティ、vertical-alignプロパティを使用して下さい。