CSSでcellspacing･cellpaddingを指定する方法

tableではcellspacingやcellpadding属性で隙間を調整できます。

これらはhtmlだけではなくCSSで調整することができます。

CSSでtableのcellspacing･cellpaddingを指定する方法、効かない原因を解説します。

【html】cellspacing

cellspacingは各マス、線と線の間を調整するhtml属性です。

数値の単位は不要で、px指定となります。

cellspacing="10"と指定すると下記のようになります。

テキスト	テキスト
テキスト	テキスト

<style>
.example{
    border: 1px solid #333;
}
.example td{
    border: 1px solid #333;
}
</style>
<table cellspacing="10" class="example">
    <tr>
        <td>テキスト</td><td>テキスト</td>
    </tr>
    <tr>
        <td>テキスト</td><td>テキスト</td>
    </tr>
</table>

見やすいように線をつけています。

cellspacing属性が効かないとき

原因1.border-spacingを指定している

border-spacingはcellspacing属性と同じ特性を持ったCSSです。

html属性よりCSSのほうが優先されるためborder-spacingが指定されているとcellspacing属性は効きません。

html5からはCSSで指定できることはhtml属性を使わずCSSで指定することが推奨されています。

詳しくは後述しますのでCSSを利用しましょう。

原因2.cellpaddingと勘違いしている

tableに指定できる属性に「cellpadding」があります。文字がよく似ているうえに性質も似ています。間違って指定していないか確認しましょう。

cellpaddingについては後述します。

【CSS】tableにborder-spacing

cellspacingをCSSで指定するにはtableにborder-spacingを指定します。このとき数値には単位が必要です。

テキスト	テキスト
テキスト	テキスト

<style>
.example2{
    /*コレ*/border-spacing: 10px;
    border: 1px solid #333;
}
.example2 td{
    border: 1px solid #333;
}
</style>
<table class="example2">
    <tr>
        <td>テキスト</td><td>テキスト</td>
    </tr>
    <tr>
        <td>テキスト</td><td>テキスト</td>
    </tr>
</table>

border-spacingが効かないとき

原因1.border-collapse: collapseを指定している

border-collapse: collapseはマスとマスの隙間をなくすCSSです。

これを指定しているとborder-spacingの数値に関わらず隙間がなくなります。

これを回避するために「border-collapse: separate」を指定しましょう。または「border-collapse: collapse」を削除します。

「border-collapse: separate」はマスとマスの隙間を許可するCSSです。

border-collapseの初期値はseparateであるため、普段は指定不要です。

原因2.border-spacingの単位を指定していない

htmlのcellspacing属性は単位不要ですが、CSSで数値を指定する際は単位が必須です。

単位を指定しましょう。

原因3.border-spacingをtdに指定している

border-spacingはtdではなくtableに指定するCSSです。後述するpaddingと違うため注意しましょう。

【html】cellpadding

cellpaddingはマス内の文字と線の間を調整するhtml属性です。

数値の単位は不要で、px指定となります。

cellpadding="10"と指定すると下記のようになります。

テキスト	テキスト
テキスト	テキスト

<style>
.example{
    border: 1px solid #333;
}
.example td{
    border: 1px solid #333;
}
</style>
<table cellpadding="10" class="example">
    <tr>
        <td>テキスト</td><td>テキスト</td>
    </tr>
    <tr>
        <td>テキスト</td><td>テキスト</td>
    </tr>
</table>

見やすいように線をつけています。

cellpadding属性が効かないとき

原因1.tdにpaddingを指定している

tdにpaddingを指定することはcellpadding属性の指定と同じ特性です。

html属性よりCSSのほうが優先されるためpaddingが指定されているとcellpadding属性は効きません。

html5からはCSSで指定できることはhtml属性を使わずCSSで指定することが推奨されています。

詳しくは後述しますのでCSSを利用しましょう。

原因2.cellspacingと勘違いしている

tableに指定できる属性に「cellspacing」があります。文字がよく似ているうえに性質も似ています。間違って指定していないか確認しましょう。

【CSS】tdにpadding

cellpaddingをCSSで指定するにはtdにpaddingを指定します。このとき数値には単位が必要です。

テキスト	テキスト
テキスト	テキスト

<style>
.example3{
    border: 1px solid #333;
}
.example3 td{
    /*コレ*/padding: 10px;
    border: 1px solid #333;
}
</style>
<table class="example3">
    <tr>
        <td>テキスト</td><td>テキスト</td>
    </tr>
    <tr>
        <td>テキスト</td><td>テキスト</td>
    </tr>
</table>

paddingが効かないとき

原因1.paddingの単位を指定していない

htmlのcellpadding属性は単位不要ですが、CSSで数値を指定する際は単位が必須です。

単位を指定しましょう。

原因2.paddingをtableに指定している

html属性であるcellpaddingはtableに指定しますが、CSSで指定する場合はtdにpaddingを指定する必要があります。

間違わないように気を付けましょう。

まとめ

cellspacingはマスとマスの隙間の調整。

CSSで指定するにはtableにborder-spacing。

cellpaddingはマス内の文字と線の間を調整。

CSSで指定するにはtdにpadding。

以上、CSSでtableのcellspacing･cellpaddingを指定する方法、効かない原因を解説しました。