code.youlikeshare.com

How to define cellspacing and cellpadding in CSS?

Below is, perhaps, the common coding style to create a HTML table, at least this was my practise for many years.


Cell 1 Cell 2
Cell 3 Cell 4
HTML
<table cellspacing="10" cellpadding="10">
   <tr>
      <td>Cell 1</td>
	  <td>Cell 2</td>
   </tr>
   <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
   </tr><br/>
</table>

Below is the corresponding method to define the cellspacing and cellpadding in CSS.

Cell 1 Cell 2
Cell 3 Cell 4
CSS
.table-2 {border-spacing:10px; border-collapse:separate;}
.table-2 {padding:10px;}
HTML
<table class="table-2">
   <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
   </tr>
   <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
   </tr>
</table>
Notes
  • border-spacing and border-collapse are the replacement for cellspacing. If you do not want spacing at all, set the border-spacing:0 and border-collapse:collapse
  • td padding is the replacement for cellpadding