Kalau lo sering ngoding HTML, pasti udah nggak asing sama <table>. Tapi biar tampilan tabel nggak monoton kayak spreadsheet zaman dinosaurus, kita bisa styling pakai CSS biar lebih menarik. Nah, di artikel ini, gue bakal bahas beberapa trik keren buat styling tabel di HTML, dari zebra stripes sampai efek hover. Let’s go!
1. Basic Styling HTML Table
Sebelum masuk ke trik spesifik, pastiin dulu lo punya tabel dasar yang bisa di-styling. Contohnya kayak gini:
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Aldi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Bella</td>
<td>22</td>
<td>Bandung</td>
</tr>
</table>
Hasilnya:
Nah, tabel ini masih standar banget. Saatnya kita kasih gaya biar lebih cakep!
2. HTML Table dengan Zebra Stripes
Salah satu cara paling simpel buat bikin tabel lebih enak dilihat adalah pakai zebra stripes. Caranya? Pakai CSS nth-child(even) buat ngewarnain baris genap.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Aldi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Bella</td>
<td>22</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Hasilnya? Baris tabel lo bakal punya pola belang kayak zebra, bikin data lebih gampang dibaca!
3. HTML Table dengan Vertical Zebra Stripes
Kalau tadi garis belangnya horizontal, sekarang kita bikin zebra stripes vertikal alias kolom belang. Caranya? Kita pakai nth-child(even) lagi, tapi kali ini buat <td> dan <th>.
<!DOCTYPE html>
<html>
<head>
<style>
td:nth-child(even), th:nth-child(even){
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Aldi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Bella</td>
<td>22</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Jadi, kolom-kolom genap bakal punya warna beda. Simpel tapi efeknya lumayan kece!
4. Kombinasi Zebra Stripes Horizontal & Vertical
Pengen yang lebih niat? Lo bisa gabungin zebra stripes horizontal dan vertical! Hasilnya bakal kayak papan catur gitu.
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(even) td:nth-child(even),
tr:nth-child(odd) td:nth-child(odd) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Aldi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Bella</td>
<td>22</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Nah, dengan kode ini, tiap kotak tabel bakal selang-seling warna, mirip motif papan catur.
5. Tabel dengan Horizontal Dividers
Kalau lo pengen garis pemisah yang lebih jelas antar baris, lo bisa tambahin border bawah di setiap <tr>.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse;
width:100%;
}
tr {
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Aldi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Bella</td>
<td>22</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Atau kalau mau lebih clean, cukup kasih garis di bawah <th> aja biar header lebih tegas:
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse;
width:100%;
}
th {
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Aldi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Bella</td>
<td>22</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
Hasilnya:
6. Hoverable Table
Biar tabel makin interaktif, tambahin efek hover. Caranya gampang banget!
<!DOCTYPE html>
<html>
<head>
<style>
tr:hover {
background-color: #ddd;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Aldi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Bella</td>
<td>22</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Dengan ini, tiap kali user hover ke baris tertentu, warnanya bakal berubah. Cocok buat tabel yang butuh highlight pas user lagi baca data.
Kesimpulan
Biar tabel lo nggak boring, lo bisa mainin styling dengan berbagai efek kayak:
✅ Zebra stripes buat tampilan lebih rapi
✅ Vertical stripes buat efek unik
✅ Kombinasi stripes biar lebih dinamis
✅ Horizontal dividers buat tampilan clean
✅ Hover effect biar lebih interaktif
Sekarang tabel HTML lo nggak bakal ngebosenin lagi! Coba langsung di proyek lo, dijamin tampilannya makin kece!
Gimana, ada trik lain yang lo suka buat styling tabel? Drop di komen ya!
Komentar