HTML - Table Styling

Hai daar, bakal pengembang web! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini ke dunia styling table HTML. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun, saya bisa katakan bahwa menguasai styling table seperti belajar menggambar - itu dimulai dengan memahami kanvas dan alat anda. Jadi, mari kita masuk dan membuat tabel tersebut terlihat keren!

Normal HTML Table

Sebelum kita mulai menambahkan gaya ke tabel kita, mari ingatkan lagi apa bentuk dasar tabel HTML. Ini adalah contoh sederhana:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>

Kode ini membuat tabel dasar dengan dua kolom dan tiga baris (termasuk baris header). Itu berfungsi, tapi mari kita jujur, itu tentang seberapa menariknya menonton cat kering. Itu di mana styling memasuki!

HTML Table Styles

Sekarang, mari bicarakan tentang berbagai cara kita dapat menggaya tabel kita. Picturkan ini seperti kuas dan warna dalam kotak alat desain web anda:

Properti	Deskripsi
border	Menetapkan batas di sekitar tabel dan sel
border-collapse	Menentukan apakah batas sel digabung menjadi batas tunggal atau dipisahkan
width	Menetapkan lebar tabel
height	Menetapkan tinggi tabel
text-align	Mengatur ratakan teks dalam sel (kiri, kanan, tengah)
vertical-align	Mengatur ratakan teks secara vertikal dalam sel (atas, tengah, bawah)
padding	Menetapkan ruang antara batas sel dan kontennya
background-color	Menetapkan warna latar belakang tabel atau sel
color	Menetapkan warna teks
font-family	Menetapkan font untuk teks
font-size	Menetapkan ukuran teks

HTML Table Styling Examples

Mari kita menerapkan properti ini dalam beberapa contoh. Saya berjanji, di akhir ini, Anda akan menggaya tabel seperti seorang pro!

Example 1: Basic Table Styling

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>

Dalam contoh ini, kita menambahkan beberapa styling dasar. Properti border-collapse: collapse menggabungkan batas sel, menciptakan penampilan yang lebih rapi. Kita mengatur lebar tabel menjadi 100% dari wadahnya, menambahkan batas ke sel, menambahkan sedikit padding, dan memberikan header warna latar belakang abu-abu tua. Itu seperti memberikan tabel Anda potongan rambut rapi dan kemeja baru!

Example 2: Zebra Striping

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>Produk</th>
<th>Harga</th>
</tr>
<tr>
<td>Apel</td>
<td>$1.00</td>
</tr>
<tr>
<td>Buah Naga</td>
<td>$0.75</td>
</tr>
<tr>
<td>Jeruk</td>
<td>$0.90</td>
</tr>
</table>

Di sini, kita memperkenalkan konsep zebra striping. Pemilih tr:nth-child(even) menargetkan baris genap dan memberikan mereka warna latar belakang abu-abu tua. Skema warna berubah ini membuat lebih mudah bagi pengguna untuk mengikuti baris melintasi tabel. Itu seperti memberikan tabel Anda pakaian pinstripe stylish!

Example 3: Responsive Table

<style>
.responsive-table {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
@media screen and (max-width: 600px) {
th, td {
display: block;
}
tr {
margin-bottom: 15px;
}
th {
text-align: center;
}
}
</style>

<div class="responsive-table">
<table>
<tr>
<th>Nama</th>
<th>Posisi</th>
<th>Kantor</th>
<th>Umur</th>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
</table>
</div>

Contoh ini memperkenalkan responsivitas ke tabel kita. Pada layar yang lebih besar, itu berperilaku seperti tabel biasa. Tetapi pada layar yang lebih kecil (kurang dari 600px lebar), itu beralih ke tata letak seperti kartu dimana setiap sel ditampilkan sebagai blok. Itu seperti mengajarkan tabel Anda melakukan yoga - itu menjadi fleksibel dan menyesuaikan dengan berbagai ukuran layar!

Conclusion

Dan di sana Anda memiliki nya, teman-teman! Kita telah membawa tabel kita dari biasa dan membosankan ke stylish dan responsif. Ingat, styling tabel adalah tentang meningkatkan keterbacaan dan pengalaman pengguna. Itu tidak hanya tentang membuat hal-hal cantik (meskipun itu juga menyenangkan juga!)!

Seperti bagaimana hidangan yang bagus tidak lengkap tanpa presentasi yang tepat, dokumen HTML yang terstruktur baik tidak lengkap tanpa tabel yang tergaya secara proper. Jadi, maju dan gayakan tabel Anda! Dan ingat, di dunia pengembangan web, latihan membuat sempurna. Selamat coding!

Credits: Image by storyset