tableタグのcellspacing、cellpaddingをCSSで指定する方法

よく忘れるので備忘録

HTMLタグにそのまま記述すればいいじゃないという話ですが、メンテナンスの事を考えるとHTMLソースはできるだけ簡潔にまとめたい。
その方が全体的な見通しもよくなり、自分以外の人がメンテナンスする際にも構造を理解しやすく、検索エンジンのクローラーにも理解されやすくなるので、SEOの面でも少なからず影響が出てくる思います。

実際の記述方法の前にcellspacingとcellpaddingのおさらい。

cellspacing
セル同士の間隔を指定できる

cellpadding
セル内の余白(パディング)を指定できる

 

cellspacingをCSSで指定

cellspacingをCSSで表現する際に使用するプロパティーが「border-collapse」、「border-spacing」の2つ。

cellspacing=”0″と同じにする場合は「border-collapse」プロパティのみで表現可能で、border-collapseの値をcollapseにすればOK。

table {border-collapse:collapse;}

 

逆にcellspacing=”5″のように、セル同士の間隔を空けたい場合は「border-collapse」、「border-spacing」の2つを指定してやる必要があります。

まずは、「border-collapse」の値をseparateに。これで「border-spacing」が有効になるので、「border-spacing」に任意の値を指定。
この時に注意点として、負の値は指定できないこと、値が1つの場合は「上下左右」に間隔が指定され、値が2つの場合は記述した順に「左右」「上下」の間隔が指定されます。

table {
border-collapse:separate;
border-spacing:5px;
}

 

cellpaddingをCSSで指定

cellpaddingはセル内の余白(パディング)を指定するものなので、cellpaddingをCSSで指定する場合は、tdタグの「padding」プロパティーに値を指定すればOKです。

cellpadding=”5″の場合は、

td {padding:5px;}

 

cellpadding=”0″にしたい場合は、

td {padding:0;}

 

これでCSSでcellspacing、cellpaddingが指定できます。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です