cellspacingやcellpaddingをCSSで指定するには？tableタグをCSSでデザインする方法

テーブルのレイアウトを調整する方法は、大きく分けて以下の2パターンあります。

• HTML属性で指定
• CSSで指定

table要素はcellspacingやcellpadding等の属性を持っているため、HTMLだけでも自在にレイアウト調整が可能です。

とは言え、他の要素と同様にサイト内のデザインをCSSで一括管理したい場合もあるでしょう。

今回は、table要素の余白や枠線をCSSで指定する方法を整理しておきたいと思います。

１．cellspacing（セル間の余白）をCSSで調整する方法

table要素で使うことができるcellspacing属性は、テーブル内のセルとセルの間の余白を設定します。

属性で指定するには以下のようにtable要素の中に直接入力します。

値にはpxの数値が入りますが、「px」は省いて問題ありません。

border属性（枠線）もあわせて指定すると、以下のようにセル間に「5px」分の隙間が空きます。

今度は、これと全く同じ操作をCSSで試みてましょう。

CSSでセル間の余白を指定するには、まずtable要素に対してborder-collapseプロパティをseparateに設定する必要があります。

次に「どのくらい余白を空けるか」決めます。

余白の値はboder-spacingプロパティで調節できます。

HTML属性とは異なり、値にはきちんと「px」を付けないと反映されないので注意してください。

これで各セルの上下左右に「5px」分のスペースが開きます。

あるいは「border-spacing: 5px 3px;」のようにスペースを開けて別の値を入力すれば、上下に5px、左右に3pxの余白が適用されます。

また、枠線を指定するには属性と同様「border」で指定しますが、線幅のほかにも線の種類、色を同時に設定可能です。

ただし、このままだとテーブル全体を枠線で囲めますが、各セルには適用されません。

先ほどの属性指定のように、個別のセルにも枠線を適用させるには、以下のようにth・tr要素にもborderを指定する必要があります。

これで、先ほどのテーブルとまったく同じものが出力されるはずです。

２．cellpadding（セル内の余白）をCSSで調整する方法

前のチャプターでは「セル間」の余白を調節する方法について解説しました。

今度は「セル内」の余白をCSSで指定してみましょう。

table要素に直書きでセル内の余白を指定するにはcellpadding属性を使います。

cellspacingと同様、数値のみでOKです。

では、これをCSSで指定するには、どのようなプロパティが必要なのか？

この場合は、テーブル特有のプロパティではなくpaddingでOKです。

ただし、paddingの適用先はtable要素ではなく、td・th要素であることに注意しておきましょう。

これで属性指定と同様の余白がテーブルに適用されます。

３．まとめ

table要素には様々な属性が設けられており、HTMLでも自由にスタイルを変更することが可能です。

今回はCSSで指定する方法を解説しましたが、プロパティを複数設定しなければならなかったり、セレクタの指定先によって挙動が違ったりと、ちょっと使い勝手がややこしいかもしれません。

簡単な表を作る程度なら、むしろ属性指定のほうが効率が良いと思います。

最後に、今回のおさらいをしてレクチャーを締めくくりたいと思います。

• table要素のレイアウトは属性だけでなく、CSSでも調整できる
• セルとセルの間に余白を設けたい場合は、table要素のborder-collapseプロパティをseparateに設定しよう
• さらにborder-spacingプロパティを使って、余白の大きさを指定しよう
• セル内の余白を指定するならpaddingでOK
• ただし、table要素ではなくtd・th要素に設定すること