Buat lo yang baru belajar HTML, pasti pernah ketemu sama yang namanya table. Nah, biar tabel lo nggak kelihatan berantakan, ada dua properti penting yang wajib lo pahami: padding dan spacing. Gampangnya, ini yang ngatur jarak dalam dan luar sel tabel lo. Yuk, kita bahas satu per satu!
Apa Itu Padding & Spacing di HTML Table?
Sebelum lebih jauh, kita pahami dulu bedanya:
- Padding: Jarak antara isi sel dan batas (border) sel
- Spacing: Jarak antara satu sel dengan sel lainnya
Dua properti ini bikin tampilan tabel lebih rapi dan enak dilihat. Kalau nggak diatur, tabel bisa kelihatan dempet atau malah terlalu renggang.
Cara Mengatur Padding di HTML Table
Biar isi dalam sel tabel nggak nempel langsung ke border, lo bisa pakai padding dalam CSS. Contohnya kayak gini:
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid black; padding: 10px;">Judul 1</th>
<th style="border: 1px solid black; padding: 10px;">Judul 2</th>
</tr>
<tr>
<td style="border: 1px solid black; padding: 10px;">Isi 1</td>
<td style="border: 1px solid black; padding: 10px;">Isi 2</td>
</tr>
</table>
Hasilnya:
Penjelasan Kodenya:
✔ padding: 10px; → Bikin jarak 10px antara teks dan border dalam sel
✔ border-collapse: collapse; → Biar border tabel menyatu, bukan double
Cara Mengatur Spacing di HTML Table
Kalau lo merasa antar-sel terlalu mepet, bisa diatur pakai border-spacing. Contohnya kayak gini:
<table style="border-spacing: 10px; width: 100%;">
<tr>
<th style="border: 1px solid black;">Judul 1</th>
<th style="border: 1px solid black;">Judul 2</th>
</tr>
<tr>
<td style="border: 1px solid black;">Isi 1</td>
<td style="border: 1px solid black;">Isi 2</td>
</tr>
</table>
Hasilnya:
Penjelasan Kodenya:
✔ border-spacing: 10px; → Nambahin jarak 10px antar-sel tabel
✔ Beda sama padding: Kalau padding itu di dalam sel, spacing ini antar-sel
Bonus: Cara Menghilangkan Spacing dengan border-collapse
Kalau lo pengen tabel lebih rapi tanpa jarak antar-sel, pakai border-collapse: collapse;. Contohnya:
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid black; padding: 10px;">Judul 1</th>
<th style="border: 1px solid black; padding: 10px;">Judul 2</th>
</tr>
<tr>
<td style="border: 1px solid black; padding: 10px;">Isi 1</td>
<td style="border: 1px solid black; padding: 10px;">Isi 2</td>
</tr>
</table>
Hasilnya:
✔ border-collapse: collapse; → Biar nggak ada jarak antar-sel (alias spacing 0px)
Kesimpulan
- Padding buat atur jarak dalam sel (antara teks & border)
- Spacing buat atur jarak antar-sel
- Kalau mau hapus spacing, pakai
border-collapse: collapse;
Dengan ngerti dua properti ini, tabel lo bakal lebih rapi dan enak dilihat. Semoga bermanfaat, bro! Selamat ngoding!
Komentar