Hai, sobat ngoding! Kali ini kita bakal bahas gimana caranya bikin tampilan tabel di website lo jadi lebih kece dengan CSS. Tabel yang keren nggak cuma enak dilihat, tapi juga bikin data lo lebih mudah dipahami. Yuk, kita mulai petualangan styling tabel ini!
1. Bikin Border Tabel yang Keren
Pertama-tama, kita kasih border dulu biar tabelnya nggak polos banget. Caranya gampang, cukup tambahin properti border di CSS lo:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid #ff6347; /* Warna tomat biar segar */
}
</style>
</head>
<body>
<table>
<tr><th>Judul</th></tr>
<tr><td>Isi</td></tr>
</table>
</body>
</html>
Dengan kode di atas, tabel lo bakal punya border tipis berwarna tomat.
2. Gabungin Border Biar Rapi
Kadang, border tabel keliatan dobel. Biar lebih rapi, kita bisa gabungin border-nya pake border-collapse:
table {
border-collapse: collapse;
}
Sekarang, border tabel lo bakal keliatan nyatu dan lebih clean.
3. Atur Lebar dan Tinggi Tabel
Biar tampilan tabel lebih proporsional, atur deh lebar dan tingginya:
table {
width: 100%; /* Tabel melebar sesuai container */
}
th {
height: 50px; /* Tinggi header 50px */
}
Dengan setting ini, tabel lo bakal responsif dan elemen di dalamnya punya ukuran yang pas.
4. Rapiin Teks di Tabel
Biar teks di tabel keliatan rapi, kita bisa atur perataannya:
td {
text-align: center; /* Teks di tengah secara horizontal */
vertical-align: middle; /* Teks di tengah secara vertikal */
}
Sekarang, teks di dalam sel tabel lo bakal keliatan lebih rapi dan enak dibaca.
5. Tambahin Padding Biar Lega
Biar konten di dalam sel nggak dempet sama border, tambahin padding:
td {
padding: 15px; /* Jarak 15px di dalam sel */
}
Dengan padding, konten di dalam sel bakal punya ruang bernapas dan tampilan tabel lo jadi lebih enak dilihat.
6. Warnain Tabel Biar Makin Kece
Terakhir, kasih warna biar tabel lo makin eye-catching:
th {
background-color: #4682b4; /* Warna biru steel untuk header */
color: white; /* Teks putih di header */
}
td {
background-color: #f0f8ff; /* Warna alice blue untuk sel */
}
Dengan kombinasi warna ini, tabel lo bakal keliatan profesional dan menarik.
Itu dia tips simpel buat bikin tabel lo jadi lebih keren dengan CSS. Jangan ragu buat eksplorasi lebih lanjut dan sesuaikan dengan gaya yang lo suka. Selamat mencoba dan happy coding!
Komentar