テーブルにおける垂直表示位置

 
ビジュアル詳細
ホーム > CSS2 Note > vertical-align > テーブルにおける垂直表示位置

テーブルセル要素(th td)における垂直表示位置 (CSS2.1仕様書準拠)

<style type="text/css"><!--
.bl td {vertical-align:baseline;}    /*セルのベースラインを、行全体内の中で最も高い文字のベースラインと揃えます。*/
.tp td {vertical-align:top;}         /*セルボックスの上線を、行全体の上線と揃えます。*/
.bt td {vertical-align:bottom;}      /*セルボックスの下線を、行全体の下線と揃えます。*/
.md td {vertical-align:middle;}      /*セルボックスの中心線を、行全体の中心線と揃えます。*/
.sb td {vertical-align:sub;}         /*これらの指定は無効となり、ベースラインで揃えられます。*/
.sp td {vertical-align:super;}       /*これらの指定は無効となり、ベースラインで揃えられます。*/
.tt td {vertical-align:text-top;}    /*これらの指定は無効となり、ベースラインで揃えられます。*/
.tb td {vertical-align:text-bottom;} /*これらの指定は無効となり、ベースラインで揃えられます。*/

.xs {font-size:x-small;}
.st {font-size:small;}
.mt {font-size:medium;}
.xl {font-size:x-large;}
.xx {font-size:xx-large;}
.zt {font-size:2.4em;}
--></style>

<table border="1">
<tr class="bl"><td>baseline
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="tp"><td>top
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="bt"><td>bottom
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="md"><td>middle
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="sb"><td>sub
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="sp"><td>super
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="tt"><td>text-top
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="tb"><td>text-bottom
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
</table>
*1 CSS2、CSS2.1の仕様書においてvertical-alignの適用要素はインライン要素とテーブルセル要素(th td要素)です。
*2 CSS2、CSS2.1の仕様書に反してie7においてsub superはベースラインではなくmiddleとして表示され、text-topはtop、text-bottomはbottomと同様に表示されます。この表示はie8では修正されています。
 

tr要素における垂直表示位置 (ブラウザ独自仕様)

<style type="text/css"><!--
.bl {vertical-align:baseline;}    /*tr要素で、セルのベースラインを、行全体内の中で最も高い文字のベースラインと揃えます。*/
.tp {vertical-align:top;}         /*tr要素で、セルボックスの上線を、行全体の上線と揃えます。*/
.bt {vertical-align:bottom;}      /*tr要素で、セルボックスの下線を、行全体の下線と揃えます。*/
.md {vertical-align:middle;}      /*tr要素で、セルボックスの中心線を、行全体の中心線と揃えます。*/
.sb {vertical-align:sub;}         /*tr要素でも、これらの指定は無効となり、ベースラインで揃えられます。*/
.sp {vertical-align:super;}       /*tr要素でも、これらの指定は無効となり、ベースラインで揃えられます。*/
.tt {vertical-align:text-top;}    /*tr要素でも、これらの指定は無効となり、ベースラインで揃えられます。*/
.tb {vertical-align:text-bottom;} /*tr要素でも、これらの指定は無効となり、ベースラインで揃えられます。*/

.xs {font-size:x-small;}
.st {font-size:small;}
.mt {font-size:medium;}
.xl {font-size:x-large;}
.xx {font-size:xx-large;}
.zt {font-size:2.4em;}
--></style>

<table border="1">
<tr class="bl"><td>baseline
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="tp"><td>top
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="bt"><td>bottom
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="md"><td>middle
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="sb"><td>sub
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="sp"><td>super
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="tt"><td>text-top
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
<tr class="tb"><td>text-bottom
  <td class="zt">Mixdy<td class="xx">Mixdy<td class="xl">Mixdy<td class="mt">Mixdy<td class="st">Mixdy<td class="xs">Mixdy
</table>
*3 CSS2、CSS2.1の仕様書に反してo9を除くie4- ff1- sf1- gc1-において、baseline top bottom middleは適用要素であるテーブルセル要素(th td要素)以外のtr要素においても適用されます。また、ie7においてsub superはベースラインではなくmiddleとして表示され、text-topはtop、text-bottomはbottomと同様に表示されます。この表示はie8では修正されています。
 
関連項目: vertical-align | 一般的な垂直表示位置|テーブルにおける垂直表示位置
トップページ CSS2 Note ページトップ
 2008/11/01発行 2009/09/01更新