Menggunakan Cellpadding dan Cellspacing di CSS

Saat membuat table terkadang selalu ada hal yang tidak sesuai dengan keinginan, seperti halnya saat table telah selesai dibuat. Desain default yang selalu kita lihat adalah table dengan border yang seperti menumpuk. Contohnya seperti ini :

Table yang seperti itu terlihat tidak menarik dan bahkan lebih menarik table dengan desain simpel yang hanya memiliki 1 border. Terlihat tidak membosankan dan tentu saja mudah digunakan.

Lalu muncul pertanyaan :

"Bagaimana cara menghilangkan border yang menumpuk seperti itu? Bisakah dihilangkan?"

Jawabannya :

"Tentu bisa, caranya mudah! Tinggal sematkan saja cellpadding dan cellspacing dalam tag table."

Muncul lagi pertanyaan :

"Aku berhasil membuatnya! Tapi bagaimana cara menggunakan cellpadding dan cellspacing di CSS?"

Langsung ikuti saja langkah-langkah dibawah ini ya :)

<table>
  <tbody>
    <tr>
      <td>Aulia</td>
      <td>Nela</td>
      <td>David</td>
    </tr>
    <tr>
      <td>Rido</td>
      <td>Rully</td>
      <td>Reza</td>
    </tr>
    <tr>
      <td>Rafik</td>
      <td>Fachrul</td>
      <td>Ekky</td>
    </tr>
  </tbody>
</table>

Script table di atas adalah contoh table yang akan dibuat. Dan ini adalah script cssnya untuk membuat table yang default :

table {border-collapse: collapse}
td {border:1px solid; padding: 0px;}

Hasilnya seperti berikut :

Kurang menarik ya? Sekarang gunakan padding untuk menggantikan cellpadding yang berfungsi memberi jarak antar cell.

table {border-collapse: collapse}
td {border:1px solid; padding: 6px;}

Hasilnya seperti berikut :

Sudah terlihat sedikit menarik ya? Sekarang kita gunakan border-spacing untuk menggantikan cellspacing.

table {border-spacing: 2px;}
td {border:1px solid; padding: 6px;}

Dan Hasilnya seperti berikut :

Bagaimana? Sudah paham kan cara menggunakan cellpadding dan cellspacing di CSS?

Semoga bermanfaat ya :)