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

●表をセンタリングする

 ブロック要素を margin-left: auto、margin-right: auto を使って、センタリング(中央揃え)する際、ブロック要素の幅(width)を指定する必要がありますが、表(テーブル=table)は自身が幅を持っているため、幅を指定しなくても問題はありません。ここでは幅を指定していませんが、作者がレイアウトを勘案し、必要に応じて適切な幅を指定すると良いでしょう。 表全体の幅を指定することもできますが、セル列の幅に指定することもできます。使える値は長さを表す単位付きの数値かパーセンテージ(〜%)があります。パーセンテージも含め、レイアウトをよく確認してから幅の指定をするようにしましょう。表全体の幅は簡単に書くと、table { width: 値 } となります。


表題(表のタイトル)
見出しセル1列目 見出しセル2列目 見出しセル3列目
データセル1行目1列目 データセル1行目2列目 データセル1行目3列目
データセル2行目1列目 データセル2行目2列目 データセル2行目3列目
データセル3行目1列目 データセル3行目2列目 データセル3行目3列目
データセル4行目1列目 データセル4行目2列目 データセル4行目3列目
データセル5行目1列目 データセル5行目2列目 データセル5行目3列目

【CSS】

div {
 text-align: center
}
caption {
 font-size: 1em;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 0.5em
}
table {
 background: #008080;
 margin-left: auto;
 margin-right: auto
}
th, td {
 font-size: 1em
}

※注: caption の margin-bottom プロパティはNスケープ対策です。


【HTML】

<div>
<table border="5">
 <caption>表題(表のタイトル)</caption>
 <tbody>
  <tr>
   <th>見出しセル1列目</th>
   <th>見出しセル2列目</th>
   <th>見出しセル3列目</th>
  </tr>
  <tr>
   <td>データセル1行目1列目</td>
   <td>データセル1行目2列目</td>
   <td>データセル1行目3列目</td>
  </tr>
  <tr>
   <td>データセル2行目1列目</td>
   <td>データセル2行目2列目</td>
   <td>データセル2行目3列目</td>
  </tr>
  <tr>
   <td>データセル3行目1列目</td>
   <td>データセル3行目2列目</td>
   <td>データセル3行目3列目</td>
  </tr>
  <tr>
   <td>データセル4行目1列目</td>
   <td>データセル4行目2列目</td>
   <td>データセル4行目3列目</td>
  </tr>
  <tr>
   <td>データセル5行目1列目</td>
   <td>データセル5行目2列目</td>
   <td>データセル5行目3列目</td>
  </tr>
 </tbody>
</table>
</div>


 文書型宣言の<!DOCTYPE 〜>の内容において、HTMLの種類が「HTML4.01 Transitional」で"http://www.w3.org/〜"のURLが記載されている場合やHTMLの種類が「Strict」であれば、 div { text-align: center } の指定は必要ありません。table { margin-left: auto; margin-right: auto } でセンタリングされますので、こちらのみを指定してください。また、 margin-left: auto; margin-right: auto の代わりに margin: auto を使っても同じようにセンタリングされます。

 実際に指定するときは、CSSのほうはクラス名の入ったセレクタとして指定し、HTMLはclass属性で指定すると実用的だと思います。また、ID名の含んだセレクタ、 id 属性を使っても構いません。(「クラス名とID名について」を参照。)

 注意する点としては、キャプション(caption=表題)を指定した時は table と同じように margin-left: auto; margin-right: auto を指定してください。指定しないと、Win IEでセンタリングされていても、Nスケープのブラウザで確認するとキャプションだけがセンタリングされていませんので注意が必要です。また、HTMLのほうで、<caption>〜</caption>の caption要素を table要素の開始タグ<table 〜>直後に配置する必要があります。

<table border="5">
 <caption>表題(表のタイトル)</caption>

 それから、キャプションと表本体の間隔は Win IEではちょうど良いのですが、Nスケープ(Ver.7.1で確認)で見ると、くっつきすぎているのが気になります。もし、改善するときは caption に margin-bottom: 値(0.5em〜1em)を付加すると良いでしょう。ちなみに、caption の上下マージン(margin-top、margin-bottom プロパティ)の指定は、Nスケープのブラウザで有効ですが、 Win IEでは指定しても反映されません。


■関連ページ

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

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