HTML - Pengaturan Gaya Tabel

Hai teman-teman, pengembang web masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia pengaturan gaya tabel HTML. Sebagai orang yang telah mengajar ilmu komputer selama bertahun-tahun, saya bisa katakan bahwa menguasai pengaturan gaya tabel adalah seperti belajar menggambar - itu dimulai dengan memahami kanvas dan alat Anda. Jadi, mari kita masuk dan bikin tabel itu tampak menarik!

Tabel HTML Normal

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>Baris 1, Sel 1</td>
<td>Baris 1, Sel 2</td>
</tr>
<tr>
<td>Baris 2, Sel 1</td>
<td>Baris 2, Sel 2</td>
</tr>
</table>

Kode ini menciptakan tabel dasar dengan dua kolom dan tiga baris (termasuk baris header). Itu berfungsi, tapi mari kita jujur, itu tentang sama menariknya seperti melihat cat kering. Itu di mana gaya memasuki!

Gaya Tabel HTML

Sekarang, mari bicarakan tentang berbagai cara kita dapat mengatur gaya tabel kita. Pikirkan ini sebagai kuas dan warna dalam kitab desain web Anda:

Properti	Deskripsi
border	Menetapkan batas di sekitar tabel dan sel
border-collapse	Menentukan apakah batas sel dicollapse menjadi batas tunggal atau dipisahkan
width	Menetapkan lebar tabel
height	Menetapkan tinggi tabel
text-align	Menyusun teks di dalam sel (kiri, kanan, tengah)
vertical-align	Menyusun teks secara vertikal di 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

Contoh Pengaturan Gaya Tabel HTML

Mari kita masukkan properti ini ke dalam aksi dengan beberapa contoh. Saya janji, pada akhirnya Anda akan mengatur gaya tabel seperti seorang ahli!

Contoh 1: Pengaturan Gaya Tabel Dasar

<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 telah menambahkan beberapa gaya dasar. Properti border-collapse: collapse menggabungkan batas sel, menciptakan penampilan yang lebih rapi. Kita menetapkan lebar tabel menjadi 100% dari wadahnya, menambahkan batas ke sel, menambahkan beberapa padding, dan memberikan header warna abu-abu tua. Itu seperti memberikan tabel Anda pemotongan rapi dan baju baru!

Contoh 2: Striped Zebra

<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 Nanas</td>
<td>$0.75</td>
</tr>
<tr>
<td>Jeruk</td>
<td>$0.90</td>
</tr>
</table>

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

Contoh 3: Tabel Responsif

<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 di mana setiap sel ditampilkan sebagai blok. Itu seperti mengajarkan tabel Anda melakukan yoga - itu menjadi fleksibel dan menyesuaikan diri dengan ukuran layar yang berbeda!

Kesimpulan

Dan begitu saja, teman-teman! Kita telah membawa tabel kita dari biasa dan membosankan ke menarik dan responsif. Ingat, mengatur gaya tabel adalah tentang meningkatkan keterbacaan dan pengalaman pengguna. Itu tidak hanya tentang membuat hal-hal tampak cantik (meskipun itu menyenangkan juga!).

Saat Anda terus melanjutkan perjalanan pengembangan web Anda, terus mencoba gaya-gaya yang berbeda. Mungkin cobalah menambahkan efek hover ke baris, atau mainkan dengan skema warna yang berbeda. Kemungkinan adalah tak terbatas!

Seperti yang Anda lakukan dengan makanan yang lezat, Anda memerlukan presentasi yang tepat, dokumen HTML yang terstruktur baik juga memerlukan tabel yang diatur gaya dengan benar. Jadi, maju dan atur gaya tabel Anda! Dan ingat, di dunia pengembangan web, latihan membuat sempurna. Selamat coding!

Credits: Image by storyset