Tableのセンタリング

間違い

最終更新
更新はありません
Tableをセンタリングしたいのですが……
text-align:center でOKです

全然「OK」じゃありません。特定のブラウザの誤まったCSSの実装に依存した裏技に過ぎません。

正しい方法

最終更新
更新はありません
方法1
table{
 margin-right : auto;
 margin-left : auto
}

但しInternet Explorerに無視されます。

方法2
table{
 margin-right : 10%;
 margin-left : 10%;
}
/* 数値は適当 */

但し、tableの幅(width)を指定していた場合はセンタリングにはなりません。もし、幅(width)を指定する必要があるなら、autoにする必要があります。

table{ width : auto }

できないものはできない

最終更新
更新はありません
table{ width : 500px }

このように幅をピクセルで指定していた場合、IEでは上に挙げた正式な方法ではセンタリングされません。

どうしても現行のIE5.0/5.5/6.0でもセンタリングを実現させたいなら、DOCTYPE宣言をtransitionalなものにし、HTMLのalign属性を使うのが、まっとうな方法です。

<div align="center">
  <table summary="table summary" width="500">
    <tbody>
      <tr>
        <td>content</td>
      </tr>
    </tbody>
  </table>
</div>

text-align:centerは何がまずいのか

最終更新
更新はありません
  1. text-alignは、インライン要素の、右揃え、左揃え、中央揃えを制御するために、そのインライン要素を含んでいるブロック要素に指定するプロパティです。ブロック要素とインライン要素の区別がつかないうちは、CSSは絶対に理解できませんから、これを混乱させる教え方は悪質であると言えます。
  2. text-alignプロパティは、子孫に継承します(Inherited : yes)。tableの子に継承しないのはIEの誤実装です。ゆえに、他の正しい実装をしたブラウザではtableの中身もセンタリングされます。簡単な例示をポンと出して、はいこれでできますよ、という類のものではないのです。つまらん裏技というのは、得てしてそういうものです。
    th, td{ text-align : left }
    これで大体回避できますが、IEでしか表示確認しない人にはまだまだ不幸が待っているかも知れません。