tableの設定
書式:
border-collapse: separate;
border-spacing: 0;
margin-left: auto;
margin-right: auto;
width: 600px;
適用要素:table要素(個別では全ての要素に適用可能)
古いhtmlでtable要素を使用して要素の配置を制御している場合に
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
というような記述が出てくることがありますが、
html5ではtable要素に対して以下の属性は指定できません。
width
frame
rules
cellspacing
cellpadding
summary
また、以下はhtml 4.01 strict以降で非推奨の属性になります。
これらの属性はhtml 4.01 TransitionalまたはFrameset以外のhtml、xhtmlでは使用できません。
align
bgcolor
なので上記のtableの開始タグの記述は規約違反になってしまいます。
そこで上記の指定をcssで書き直すと書式に書いたようになります。
webで検索すると「border-collapse:collapse;border-spacing:0;」とすればいいと
ありますが、border-spacingはborder-collapseの値がseparateのときしか有効になりません。
「border-collapse:collapse;border-spacing:0;」では「border-spacing:0;」が無効になるためか
微妙にセル間にスペースができます。
なのであえて「border-collapse: separate;」としてセルを分割表示にして、
「border-spacing: 0;」を指定しセル間を0にします。
table要素の属性としてのalignはテーブル位置を指定するため、
align: center;でテーブルを画面中央に表示します。
w3cの規約に準拠すると、ボックスの中央指定は
margin-left: auto; margin-right: auto;
のようになりますので、これを指定します。
w3cの規約に準拠と限定しているのは、IE6やIEの互換モードではmarginによる
中央寄せができないためです。
IEの古いものにも対応させるなら、
tableをdivで囲って、囲ったdivにtext-algin: center;を指定します。
(これだとtable内の文字が中央寄せになります。適宜text-alginを設定しての調整が必要になります)
border="0"についての記述がありませんが、あえて書くなら、border: none;またはborder: 0;になります。
ただ、borderは初期値がnone(非表示で太さが0)なのであえて書く必要がありません。
border: 0;は太さを0にして見えないようにします。