Advan – Mengatur tampilan website yang user-friendly adalah hal yang penting, terutama jika kamu ingin pengunjung merasa nyaman menjelajahi situs kamu. Salah satu elemen penting dalam desain web adalah tabel. Nah, kalau kamu ingin tahu bagaimana cara membuat tabel dengan HTML yang responsif, kamu berada di tempat yang tepat. Dalam artikel ini, kita akan membahas langkah-langkah sederhana untuk membuat tabel yang bisa menyesuaikan tampilan di berbagai perangkat, mulai dari desktop hingga smartphone.
Kenapa Tabel Responsif Itu Penting?
Tabel yang tidak responsif akan membuat tampilan di layar kecil seperti smartphone atau tablet terlihat berantakan. Pengguna mungkin harus melakukan scroll ke samping, yang pastinya bikin pengalaman browsing mereka jadi kurang nyaman. Sebaliknya, tabel yang responsif akan secara otomatis menyesuaikan ukuran dan tampilannya sesuai dengan ukuran layar perangkat yang digunakan.
Buat kamu yang mengelola website, ini menjadi penting banget agar pengguna tetap betah dan informasi bisa diakses dengan mudah. Ditambah lagi, tabel responsif juga bisa membantu meningkatkan SEO situs kamu karena Google suka dengan desain yang mobile-friendly.
Cara Membuat Tabel HTML yang Responsif
Kita akan mulai dari langkah dasar, lalu lanjut ke beberapa teknik tambahan untuk membuat tabel yang sepenuhnya responsif.
1. Membuat Tabel Sederhana dengan HTML
Pertama-tama, mari kita buat tabel dasar dengan HTML. Coba ketik kode di bawah ini ke file HTML kamu:
“`html
<table>
<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>No. Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>[email protected]</td>
<td>098-765-4321</td>
</tr>
</tbody>
</table>
“`
Tabel di atas masih belum responsif, tetapi ini adalah fondasi dari tabel HTML dasar yang bisa kamu kembangkan. Sekarang mari kita buat tabel ini menjadi lebih fleksibel untuk berbagai ukuran layar.
2. Menambahkan CSS untuk Responsivitas
Untuk membuat tabel lebih responsif, kita bisa menambahkan CSS. Coba tambahkan kode CSS berikut:
“`css
table {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: #f2f2f2;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin-bottom: 10px;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
td:before {
content: attr(data-label);
position: absolute;
left: 10px;
font-weight: bold;
}
}
“`
Dengan menggunakan kode CSS ini, tabel akan menyesuaikan tampilan saat diakses melalui perangkat mobile. Setiap sel data akan diposisikan secara vertikal dan terlihat seperti kartu informasi individual. Ini adalah trik sederhana untuk membuat tampilan tabel yang lebih mudah dibaca di layar kecil.
Baca juga: Kamu Harus Tahu! Cara Belajar Coding di Udemy untuk Pemula
3. Menambahkan Data-Label untuk Mobile
Kode CSS di atas menggunakan atribut `data-label` pada elemen `td`. Jadi, pastikan kamu menambahkan atribut ini di dalam kode HTML table kamu. Misalnya, ubah tabel yang sebelumnya menjadi seperti ini:
“`html
<table>
<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>No. Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label=”Nama”>John Doe</td>
<td data-label=”Email”>[email protected]</td>
<td data-label=”No. Telepon”>123-456-7890</td>
</tr>
<tr>
<td data-label=”Nama”>Jane Doe</td>
<td data-label=”Email”>[email protected]</td>
<td data-label=”No. Telepon”>098-765-4321</td>
</tr>
</tbody>
</table>
“`
Dengan menambahkan `data-label`, informasi di tabel akan tetap terlihat rapi dan terstruktur ketika diakses melalui perangkat mobile.
Menggunakan Framework CSS untuk Tabel Responsif
Kalau kamu nggak ingin repot mengatur semuanya secara manual, kamu bisa menggunakan framework CSS seperti Bootstrap. Bootstrap sudah menyediakan class bawaan yang bisa kamu pakai untuk membuat tabel responsif.
Cukup tambahkan class `table-responsive` ke dalam container tabel kamu. Contohnya:
“`html
<div class=”table-responsive”>
<table class=”table”>
<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>No. Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>[email protected]</td>
<td>098-765-4321</td>
</tr>
</tbody>
</table>
</div>
“`
Framework seperti Bootstrap bisa sangat membantu karena mereka sudah memiliki komponen yang dioptimalkan untuk berbagai perangkat, sehingga kamu nggak perlu pusing mikirin kode CSS dari awal.
Bikin Website Lebih Optimal
Nah, setelah kamu tahu cara membuat tabel dengan HTML yang responsif, sekarang saatnya kamu mulai menerapkannya di website kamu. Tabel yang responsif akan membuat pengalaman pengunjung jadi lebih baik dan meningkatkan peluang mereka untuk bertahan lebih lama di situsmu.
Ngomong-ngomong soal meningkatkan produktivitas dan performa website, pastikan kamu juga menggunakan perangkat yang tepat untuk mendukung pekerjaan coding atau pengembangan web kamu. Kalau kamu lagi nyari laptop yang pas buat itu, ADVAN Laptop Notebook Soulmate 14 inch FHD IPS INTEL i3 bisa jadi pilihan yang tepat. Dengan layar FHD IPS dan prosesor Intel i3, laptop ini bakal bikin pengalaman coding kamu jadi lebih lancar dan nyaman.
Membuat tabel responsif di HTML sebenarnya nggak sulit, kamu hanya perlu memahami beberapa trik CSS sederhana. Kamu bisa membuatnya manual dengan CSS, atau jika mau lebih cepat, pakai framework CSS seperti Bootstrap.
Kalau kamu sering bekerja dengan tabel dan pengembangan web, pastikan kamu menggunakan perangkat yang mendukung. Salah satu yang direkomendasikan adalah ADVAN Laptop Notebook Soulmate 14 inch FHD IPS INTEL i3 yang cocok buat kamu yang butuh performa tangguh dan layar jernih untuk coding.***
Editor: Andik Chefasa