[CSS]CSSでtableタグのcellspacing、cellspaddingを指定する方法

CSSスニペット

2013.12.27

tableのセルの間隔とセル内の余白を、cellpadding、cellspacingは使わずにCSSで指定する方法のご紹介です。

tableタグにcellpadding、cellspacing などを記述
CSS でセル内の余白や枠線の調整

tableタグにcellpadding、cellspacing などを記述

table タグにcellpadding、cellspacing を指定し、セルの間隔とセル内の余白を共に0にする場合は、以下のような記述になります。
※テーブルを分かり易く見せる為に、borderも指定しています。

<table border="1" cellpadding="0" cellspacing="0" bordercolor="#000">
    <tr>
    <td>セルの余白</td>
    <td>table タグでcellpadding="0"</td>
    </tr>
    
    <tr>
    <td>セルの間隔</td>
    <td>table タグでcellspacing="0"</td>
    </tr>
</table>

<tr>

<td>セルの余白</td>

<td>table タグでcellpadding="0"</td>

</tr>

<tr>

<td>セルの間隔</td>

<td>table タグでcellspacing="0"</td>

</tr>

</table>

ブラウザにも依りますが、概ね↓このような見え方になります。

CSS でセル内の余白や枠線の調整

今度はtableタグのcellpadding、cellspacingの記述は消し、替わりにtable class=”css”を付けて、

<table class="css">
    <tr>
    <td>セルの余白</td>
    <td>CSS でpadding:0</td>
    </tr>
    
    <tr>
    <td>セルの間隔</td>
    <td>CSS でborder-collapse:collapse</td>
    </tr>
</table>

<tr>

<td>セルの余白</td>

<td>CSS でpadding:0</td>

</tr>

<tr>

<td>セルの間隔</td>

<td>CSS でborder-collapse:collapse</td>

</tr>

</table>

スタイルシートでセルの間隔とセル内の余白を調整してみます。

table.css {
    border-collapse:collapse;
    border:2px solid #000
    }

table.css tr td {
    padding:0;
    border:2px solid #000
    }

table.css {

border-collapse:collapse;

border:2px solid #000

}

table.css tr td {

padding:0;

border:2px solid #000

}

border-collapse:collapseでセルの間隔を無くして、padding:0でセル内の余白を0 にしていますので、↓このような見え方になります。