テーブルタグの初期設定
table{
border-collapse:collapse;
font-size:100%;
}
border-collapse:collapse;
font-size:100%;
}
- セルとセルの間を空けるかどうかを設定するborder-collapseだが、ほとんどのブラウザでの初期設定値はぴったりくっつける「collapse」だが、まれに間を空ける「separate」であることがあるのを回避するため、「border-collapse:collapse;」を記述する。
- 色指定やフォントサイズなど通常子要素に引き継ぐ値が、ブラウザによってtableタグには引き継がれない場合がある。そのため、tableタグに改めてfont-sizeなど設定する必要があります。
ボーダーラインを非表示にしたい場合
table,tr,td{
border:none;
}
border:none;
}
ボーダーラインを表示させたい場合
table{
border-top:1px solid #ccc;
border-right:1px solid #ccc;
}
tr,td{
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
}
border-top:1px solid #ccc;
border-right:1px solid #ccc;
}
tr,td{
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
}
このように、ボーダーラインが2重に書かれることがないよう配慮する。
tableのセル幅を均等にする
table{
table-layout:fixed;
}
table-layout:fixed;
}
tableをセンターにしたいときの注意 〜「margin:0 auto;」が効かない！？〜
「margin-left:○○px」と記述すれば問題ないが、なぜかIE6ではautoに対応していない。
これに対応させるに後方互換性に対応するときと同様の対策が必要である。
つまり、tableタグに「margin:0 auto;」指定することに加え、tableを囲むタグに「text-align:center;」を記述し、table内のタグ（th,td）に必要に応じて「text-align:left;」を記述する必要がある。
ちなみにモダンブラウザでは、tableタグにおいて「margin:0 auto;」のみでセンタリングされる。