Apa kegunaan dari cellpadding dan cellspacing?

Postingan tentang atribut tabel HTML ini adalah postingan pertama di sesi Tutorial Tabel HTML setelah sebelumnya kita menyelesaikan pembahasan di sesi Tutorial Formating Text HTML. Di sesi ini, kita akan membahas seputar tabel di HTML.

Table of Contents Show

• Atribut tabel HTML
• Atribut border pada tag <table>
• Atribut tabel HTML cellpadding
• Atribut cellspacing pada tag <table>
• Cara Membuat Tabel di HTML
• Memberi Garis (Border)
• Memberi Jarak Antar Sel dan Konten (padding)
• Memberi Jarak Antar Satu Sel dan Sel Lain (Cell Spacing)
• Mengatur Panjang Tabel
• Menggabungkan Sel
• Gabungan Antara Rowspan dan Colspan
• Cara Mewarnai Tabel
• Catatan Deprekasi di HTML5
• Kode Program Lengkap
• Pertemuan Selanjutnya
• Video yang berhubungan

Sebelumnya kita sudah pernah membahas bagaimana cara membuat tabel. Kalau lupa dan ingin lihat lagi, bisa lihat di pembahasan membuat tabel di HTML.

Untuk membuat tabel di HTML, tag yang digunakan adalah tag <table>, tag <tr>, dan tag <td>. Tag <table> merupakan tag pembuka untuk membuat tabel, tag <tr> merupakan tag pembuat baris di tabel, dan tag <td> sebagai pembuat kolom data di tabel.

Di postingan kali ini, kita akan bahas beberapa atribut yang dimiliki oleh tag <table>, yakni atribut border, cellpadding, dan cellspacing. Ketiga atribut tersebut digunakan untuk mengubah tampilan tabel.

Atribut tabel HTML

Atribut border pada tag <table>

Atribut border digunakan untuk membuat garis tepi pada tabel. Secara default, atau tidak kita tulis atribut border, maka web browser akan menampilkan tabel tanpa garis. Berlaku juga bila kita isi atribut border dengan nilai 0.

Nilai dari atribut border berupa angka. Angka ini memiliki ukuran satuan dalam pixel. Garis tepi ini akan muncul pada sisi atas, kanan, bawah, dan kiri tabel.

Semakin besar nilai atributnya, semakin besar pula ketebalan garis tepi luar tabel. Garis tabel sisi dalam tidak ikut berubah menjadi tebal.

Berikut contoh penggunaan atribut border.

Atribut tabel HTML cellpadding

Atribut cellpadding digunakan untuk mengatur jarak isi teks tabel dengan garis dalam tabel yang memuat isi teks tersebut.

Nilai dari atribut ini juga berupa angka yang berukuran satuan dalam pixel. Penggunaan atribut cellpadding ini dapat memperbagus tampilan tabel. Tabel menjadi lebih rapi dan mudah dibaca.

Berikut contoh penggunaannya.

Atribut cellspacing pada tag <table>

Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi bagian dalam dengan bagian luar.

Sama halnya dengan atribut border dan cellpadding, nilai dari atribut cellspacing juga berukuran satuan dalam pixel.

Berikut contoh penggunaannya.

Itulah atribut border, cellpadding, dan cellspacing dalam tabel HTML. Sekarang sudah tau kan kegunaannya? Sekian pembahasan kali ini tentang atribut tabel HTML dan semoga bisa bermanfaat untuk Anda.

Dengan memanfaatkan tabel, kita bisa menampilkan data kepada user dalam bentuk kolom dan baris.

Seperti ini:

Mari kita perhatikan tabel di atas.

Tabel di atas memiliki:

• 4 buah kolom (No, Nama, Jenis Kelamin, dan Asal).
• 7 buah baris (baris pertama dihitung 1)
• dan memiliki 28 sel (4 kolom x 7 baris).

Di dalam HTML, kita bisa membuat tabel dengan berbagai macam konfigurasi dan kustomisasinya. Seperti memberi warna, mengatur jarak, panjang kolom, mengatur border, dan lain sebagainya.

Kurang lebih pengaturan tabel di HTML sama saja seperti pengaturan tabel di dalam aplikasi pemrosesan teks semisal Microsoft Word, Google Docs, Libre Office dan lain sebagainya.

Cara Membuat Tabel di HTML

Untuk membuat tabel di dalam HTML, kita membutuhkan tag-tag berikut:

1. Tag <table>
2. Tag <thead>
3. Tag <tbody>
4. Tag <tfoot>

Tag <table> sebagai kontainer.

Sedangkan tag <thead> sebagai tempat kita meletakkan nama kolom (baris paling atas sendiri).

Dan tag <tbody> adalah tempat kita menampilkan data.

Dan yang terakhir adalah tag <tfoot> untuk membuat “footer” atau bagian bawah dari suatu tabel.

4 tag di atas adalah tag yang mendefinisikan struktur dasar untuk setiap bagian dari tabel.

Sedangkan untuk mendefinikan baris dan kolom, kita membutuhkan tag-tag berikut:

• Tag <tr> (table row) untuk mendefinisikan tiap baris pada tabel.
• Tag <td> (table data) untuk mendefinisikan tiap sel pada tabel.
• Tag <th> (table head) untuk mendefinisikan tiap nama kolom pada tabel.

Perhatikan contoh berikut:

<table> <!-- Bagian kepala tabel --> <thead> <tr> <th>Baris</th> <th>Kolom</th> </tr> </thead> <!-- Bagian body tabel --> <tbody> <tr> <td>Sel 1</td> <td>Sel 2</td> </tr> <tr> <td>Sel 3</td> <td>Sel 4</td> </tr> <tr> <td>Sel 5</td> <td>Sel 6</td> </tr> </tbody> </table>

Kode HTML di atas akan menghasilkan keluaran seperti berikut:

Memberi Garis (Border)

Pada output di atas, tabel yang kita buat tidak memiliki border atau garis.

Kita bisa menambah dan mengatur ukuran baris pada tabel dengan menambahkan atribut border.

Pada kode HTML sebelumnya, coba ubah tag pembuka tabel menjadi seperti ini:

<table border="1"> ... </table>

Kode di atas akan membuat tabel kita memiliki border dengan ukuran 1 piksel.

Berikut ini hasil keluarannya:

Lebih asik bukan?

Tapi masih ada yang kurang, tabelnya terlalu mepet!

Memberi Jarak Antar Sel dan Konten (padding)

Agar tabelnya tidak terlalu mepet, kita bisa memberikan jarak dengan menambahkan atribut cellpadding pada tag <table>.

Ubah kode HTML sebelumnya menjadi:

<table border="1" cellpadding="5"> ... </table>

Atribut cellpadding="12" di atas akan memberi instruksi agar kepada browser agar memberikan jarak (padding) 5px kepada tabel kita.

Berikut ini hasil keluarannya:

Sekarang tabelnya sudah terlihat lebih lega.

Memberi Jarak Antar Satu Sel dan Sel Lain (Cell Spacing)

Selain mengatur jarak antara konten dan sel menggunakan atribut cellpadding, kita juga bisa melakukan hal sebaliknya yaitu memberi jarak antar satu sel dengan sel lainnya menggunakan atribut cellspacing.

Perhatikan contoh berikut:

<h3>Tanpa Cell Spacing</h3> <table border="1" cellpadding="5"> ... </table> <h3>Dengan Cell Spacing</h3> <table border="1" cellpadding="5" cellspacing="10"> ... </table> <h3>Cell Spacing 0</h3> <table border="1" cellpadding="5" cellspacing="0"> ... </table>

Hasil keluaran:

Berikutnya kita bisa menambahkan footer pada suatu table dengan menambahkan tag <tfoot>.

Tag <tfoot> hampir sama dengan tag <thead>, hanya saja ia ditempatkan di bagian paling bawah.

Coba ubah kode table sebelumnya menjadi seperti ini:

<table border="1" cellpadding="5" cellspacing="0"> ... <tfoot> <tr> <th>Total Sel Pada Body:</th> <td>6 Sel</td> </tr> </tfoot> </table>

Hasil keluaran:

Mengatur Panjang Tabel

Berikutnya kita bisa memanfaatkan atribut width untuk mengatur panjang tabel.

Kita bisa mengaturnya dengan berbagai macam satuan semisal pixel, atau juga bisa menggunakan persentase.

Berikut ini contoh mengubah tabel dengan atribut width:

<table border="1" width="100%" cellpadding="5" cellspacing="0"> ... <tfoot> <tr> <th>Total Sel Pada Body:</th> <td>6 Sel</td> </tr> </tfoot> </table>

Hasil keluaran:

Menggabungkan Sel

Berikutnya kita bisa melakukan merge cells pada tabel. Ia merupakan teknik menggabungkan dua atau lebih sel menjadi satu.

Ada dua tipe penggabungan sel pada tabel HTML:

1. Penggabungan kolom dengan colspan.
2. Penggabungan baris dengan rowspan.

Colspan

Dengan atribut colspan, kita akan mengubah tabel seperti ini:

Menjadi seperti ini:

Berikut ini kode programnya sebelum colspan:

<table> <thead> <tr> <th>Nama</th> </tr> <tr> <th>Depan</th> <th>Belakang</th> </tr> </thead> <tbody> <tr> <td>Budi</td> <td>Prakarya</td> </tr> <tr> <td>Andi</td> <td>Susilo</td> </tr> </tbody> </table>

Dan setelah colspan:

<table> <thead> <tr> <th colspan="2">Nama</th> </tr> <tr> <th>Depan</th> <th>Belakang</th> </tr> </thead> ... </table>

Rowspan

Sedangkan dengan atribut rowspan, kita bisa mengubah tabel seperti ini:

Menjadi seperti ini:

Kode program asli sebelum rowspan:

<table> <tbody> <tr> <td>4</td> <th>x</th> <td>5</td> <th>=</th> <td>20</td> </tr> <tr> <td>5</td> <td>5</td> <td>25</td> </tr> <tr> <td>6</td> <td>5</td> <td>30</td> </tr> </tbody> </table>

Kode program asli setelah pakai rowspan:

<style> th { vertical-align: middle; } </style> <table> <tbody> <tr> <td>4</td> <th rowspan="3">x</th> <td>5</td> <th rowspan="3">=</th> <td>20</td> </tr> <tr> <td>5</td> <td>5</td> <td>25</td> </tr> <tr> <td>6</td> <td>5</td> <td>30</td> </tr> </tbody> </table>

Pada kode di atas kita menambahkan style vertical-align: middle; agar teks x dan = diletakkan pada tengah sel secara vertikal.

Gabungan Antara Rowspan dan Colspan

Berikutnya kita bisa membuat tabel yang lebih kompleks lagi dengan menggabungkan antara rowspan dan colspan.

Sehingga tabel yang awalnya terlihat seperti ini:

Menjadi seperti ini:

Kode program dari tabel yang kedua adalah seperti berikut:

<table> <thead> <tr> <th colspan="2">Nama</th> <th rowspan="2">Asal</th> </tr> <tr> <th>Depan</th> <th>Belakang</th> </tr> </thead> <tbody> <tr> <td>Budi</td> <td>Prakarya</td> <td>Makassar</td> </tr> <tr> <td>Andi</td> <td>Susilo</td> <td>Semarang</td> </tr> <tr> <td>Doni</td> <td>Sutrisno</td> <td>Jogja</td> </tr> </tbody> </table>

Teman-teman bisa menghapus rowspan dan colspan agar tabel di atas terlihat struktur aslinya.

Cara Mewarnai Tabel

Sebenarnya kita bisa memanfaatkan atribut bgcolor pada tag <table>, <td>, mau pun <th> untuk mengubah warna latar dari sebuah tabel, baik secara keseluruhan atau pun pada sel tertentu.

Atau kita juga bisa menggunakan atribut bordercolor untuk mengatur warna border pada tabel.

Tapi, sayangnya, atribut-atribut tersebut sudah deprecated alias kadaluarsa pada HTML5 dan sudah harusnya kita ganti dengan penggunaan CSS.

Berikut ini contoh mewarnai tabel, border, dan mengatur padding dengan CSS:

<style> table { background-color: #bfffcd; color: #2e733d; border-collapse: collapse; } table, th, td { border: 1px solid #2e733d; } table td, table th { padding: 10px; }</style> <table> <tbody> <tr> <th>Nama</th> <td>:</td> <td>Nurul Huda</td> </tr> <tr> <th>Asal</th> <td>:</td> <td>Jawa Timur</td> </tr> </tbody> </table>

Hasil keluaran dari kode di atas adalah:

Catatan Deprekasi di HTML5

Banyak dari tutorial-tutorial HTML yang beredar di internet masih menyertakan cara-cara yang sudah kadaluarsa. Yang dimaksud kadaluarsa adalah cara-cara tersebut sudah bukan lagi masuk pada spesifikasi HTML5.

Menurut MDN Web Docs, ada beberapa atribut yang berhubungan dengan tabel yang seharusnya sudah tidak dipakai lagi di HTML5.

Berikut ini daftar atribut yang telah deprecated:

• align

  Bisa diganti CSS text-align

• bgcolor

  Bisa diganti dengan CSS background-color

• border

  Bsa diganti dengan CSS border

• cellpadding

  Bisa diganti dengan CSS padding pada <td> atau <th>

• cellspacing

  Bisa diganti dengan CSS border-spacing dan border-collapse

• width

  Bisa diganti dengan CSS width

• frame

• summary

• rules

Kenapa pada tutorial ini kita masih menggunakan beberapa atribut yang sudah kadaluarsa?

Jawabannya adalah: karena kita masih belum masuk pembahasan CSS dan juga agar kita mengenal sejarah sintaks lama HTML.

Kesimpulan

Di dalam dokumen HTML, kita bisa menyajikan data dalam bentuk tabel. Tabel didefinisikan dengan tag <table> sebagai kontainer, lalu tag <thead> untuk bagian header, tag <tbody> untuk bagian body table, dan tag <tfoot> untuk bagian footer.

Sedangkan untuk membuat baris pada tabel kita menggunakan tag <tr>, dan untuk cell-nya kita bisa menggunakan baik tag <td> atau pun tag <th>.

Selain itu, kita juga bisa melakukan merge cells pada HTML dengan memanfaatkan atribut rowspan dan colspan.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang cara menambahkan CSS ke dalam dokumen HTML.

Stay tune!

Referensi

[1] - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table – diakses tanggal 15 Juli 2021

Apa kegunaan cellpadding?

Apa guna atribut cellspacing dan cellpadding?

Apa fungsi dari atribut cellspacing pada tabel?

Apa itu cellspacing di HTML?