0

How to set cellpadding and cellspacing in CSS?

default

table {border-collapse: collapse;}
td    {padding: 0px;}
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>    
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>    
<td>h</td>
<td>i</td>
</tr>       
</table>
* {
  margin: 0;
  padding: 0;
}

table {
  margin: 30px;
}

table {
  border-collapse: collapse;
  background-color: lightGrey;
}

td {
  background-color: orange;
  border: 1px solid gray;
  padding: 0px;
}
RUN

Cellpadding

table {border-collapse: collapse;}
td    {padding: 6px;}
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>    
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>    
<td>h</td>
<td>i</td>
</tr>       
</table>
* {
  margin: 0;
  padding: 0;
}

table {
  margin: 30px;
}

table {
  border-collapse: collapse;
  background-color: lightGrey;
}

td {
  background-color: orange;
  border: 1px solid gray;
  padding: 6px;
}
RUN

Cellspacing

table {border-spacing: 2px;}
td    {padding: 0px;}
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>    
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>    
<td>h</td>
<td>i</td>
</tr>       
</table>
* {
  margin: 0;
  padding: 0;
}

table {
  margin: 30px;
}

table {
  border-collapse: seperate;
  border-spacing: 2px;
  background-color: lightGrey;
}

td {
  background-color: orange;
  border: 1px solid gray;
  padding: 0px;
}
RUN

Both

table {border-spacing: 2px;}
td    {padding: 6px;}
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>    
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>    
<td>h</td>
<td>i</td>
</tr>       
</table>
* {
  margin: 0;
  padding: 0;
}

table {
  margin: 30px;
}

table {
  border-collapse: seperate;
  border-spacing: 2px;
  background-color: lightGrey;
}

td {
  background-color: orange;
  border: 1px solid gray;
  padding: 6px;
}
RUN
add comment
Suggest a different solution or add another example