XHTML/CSS・トップ | CSSプロパティ・目次

●セル内容の位置揃えを指定する(応用編)

 表をあまり使わない場合やデータセルの内容が常に上揃えが望ましい場合はCSSのほうであらかじめセル内容の位置揃えを指定しておくのも一考ですが、クラス名(ID名も使用可)を使って個別に指定することもできます。


【CSS】

caption {
 font-size: 1em;
}
table {
 width: 20em;
}
th, td {
 font-size: 1em;
}
th {
 background: #800000;
}
td {
 background: #008080;
}
.venus1 {
 text-align: left;
}
.venus2 {
 text-align: center;
}
.venus3 {
 text-align: right;
}
.mars1 {
 vertical-align: top;
}
.mars2 {
 vertical-align: middle;
}
.mars3 {
 vertical-align: bottom;
}
.mercury {
 text-align: right;
 vertical-align: bottom;
}

表のタイトル
見出しセル左寄せ 見出しセル2列目
データセル1行目1列目 データセル1行目2列目
上揃え データセル2行目2列目
データセル3行目1列目 下揃え
データセル4行目1列目 右寄せ下揃え

【HTML】

<table border="外枠の太さ">
 <caption>表のタイトル</caption>
 <tbody>
  <tr>
   <th class="venus1">見出しセル左寄せ</th>
   <th>見出しセル2列目</th>
  </tr>
  <tr>
   <td>データセル1行目1列目</td>
   <td>データセル1行目2列目</td>
  </tr>
  <tr>
   <td class="mars1">上揃え</td>
   <td>データセル2行目2列目</td>
  </tr>
  <tr>
   <td>データセル3行目1列目</td>
   <td class="mars3">下揃え</td>
  </tr>
  <tr>
   <td>データセル4行目1列目</td>
   <td class="mercury">右寄せ下揃え</td>
  </tr>
 </tbody>
</table>

※ venus、mars、mercury はクラス名で作者が任意の名前を付けます。また、class属性(HTML側)にどのようなスタイルを(CSSで)指定するかは作者が勘案します。ここでは 「ドット + 任意のクラス名」 の形で説明していますが、ID名も含め、そのほかの使い方もありますので、詳しい使い方は一番下の参考ページ「クラス名とID名について」を参照にしてください。


■まとめ

 サンプルの表は実際には(表を) div要素で囲み、上下のマージンとそのほかの指定をしていますが、基本的なソースは上記のようになります。(表のタイトルを付けるか否かは任意です。)

 セルの内容を縦列ごとにまとめて指定するには、縦列をグループ化させる<colgroup span="列数を指定" 〜 ></colgroup>、または<colgroup class="クラス名" 〜 ></colgroup>があります。これは幾つかの縦列に同じスタイルを複数指定するときに使います。また、縦列ごとに個別のスタイルを指定したい場合は、 col要素を使うことになっています。しかし、背景色も含め、位置揃えについては筆者の環境では確認できませんでした。(Win IE ではうまくいきますが、Nスケープで反映されず。) そのほかも含め、ブラウザによって、反映されないなどバグも多く、colgroup要素と col要素を使っての位置揃えは事実上使えません。異なる位置揃えを指定するときはセルのひとつひとつに指定するしかありません。(ただし、縦列の幅をまとめて指定するときは colgroup要素と col要素が使えます。)


※必要に応じて、以下を参考にしてください。

XHTML/CSS・目次 | テーブル(表)・目次

Copyright (C) 2004-2007 http://www.xml.vc/