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 :

Menggunakan-Cellpadding-dan-Cellspacing-di-CSS

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 :

Menggunakan-Cellpadding-dan-Cellspacing-di-CSS

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 :

Menggunakan-Cellpadding-dan-Cellspacing-di-CSS

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 :

Menggunakan-Cellpadding-dan-Cellspacing-di-CSS

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

Semoga bermanfaat ya :)

4 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat