Representasi data adalah bagian penting di situs web mana pun. Jika Anda memiliki atau mengelola banyak data, tetapi tidak memiliki cara yang tepat untuk mewakilinya, maka data tersebut tidak akan dipahami oleh siapa pun, dan tidak ada nilainya.
Dalam kebanyakan kasus, representasi tabular adalah jenis representasi data yang penting. Apalagi jika menyangkut data statistik.
Dalam desain web, tabel secara konvensional dibuat menggunakan tag <table> </table>. Membuat tabel adalah tugas yang menantang, terutama jika perhatian membuatnya responsif. Dan jika Anda seorang pengembang WordPress maka Anda mungkin tahu, bahwa banyak tema tidak mendukung tabel responsif. Mendesain meja juga merupakan tantangan, dan tidak banyak pilihan.
Lantas, bagaimana cara mengatasi masalah ini? Ini sangat sederhana.
Tidak, solusinya bukan JS ..
Anda mungkin berpikir bahwa kami membutuhkan plugin jQuery atau plugin JavaScript untuk mengatasi masalah ini. Tapi ternyata tidak demikian. Anda tidak perlu menginstal plugin atau kerangka tambahan apa pun. Anda cukup melakukannya dengan menggunakan tag HTML <div> dan beberapa gaya CSS.
Takjub?! Bingung?! Jangan! 😀
Di akhir artikel ini, Anda akan menjadi ahli dalam membuat tabel HTML responsif yang baik! Saya akan memandu Anda melalui seluruh proses.
Jadi, ini semua tentang CSS?
Iya.
Dengan hanya menggunakan CSS kita dapat mencapai ini karena properti khusus yang disediakan. Gaya ini tidak sering digunakan dan karenanya banyak pengembang mungkin tidak tahu tentang hal yang sama. Kita dapat menggunakan properti display dan menyediakan lebar untuk semua div kita agar terlihat seperti tabel secara otomatis.
Bagaimana cara menggunakan properti 'display' untuk merepresentasikan tabel?
Tabel di bawah ini memberi Anda hubungan antara tag 'table' dan properti CSS yang didukung terkait untuk mewakili elemen yang sama. Jadi, saat membuat tabel, yang perlu Anda lakukan adalah, sebagai ganti tag 'tabel' HTML, cukup gunakan tag 'div' dan tambahkan CSS yang sesuai untuk menampilkan tabel.
Berikut adalah contoh untuk memandu Anda melalui proses membuat tabel.
Mari kita mulai.
Pada dasarnya sebuah tabel memiliki 3 bagian utama yaitu header tabel, badan tabel dan footer tabel. Jadi pertama-tama, mari buat div master, yaitu div tabel utama tempat kita akan membuat tabel.
Catatan: Untuk langkah-langkah di bawah ini, Anda perlu menambahkan kode HTML di template atau halaman di situs Anda dan kode CSS harus ditambahkan di file style.css tema Anda.
Langkah 1: Buat Div Master untuk Tabel
| HTML code | CSS code |
| <div id=“resp-table”> </div> | #resp-table { width: 100%; display: table; } |
Langkah 2: Tambahkan Keterangan Tabel
| HTML code | CSS code |
| <div id=“resp-table-caption”> Responsive Table without Table tag </div> | #resp-table-caption{ display: table-caption; text-align: center; font-size: 30px; font-weight: bold; } |
Langkah 3: Buat Baris Header Tabel
| HTML code | CSS code |
| <div id=“resp-table-header”></div> | #resp-table-header{ display: table-header-group; background-color: gray; font-weight: bold; font-size: 25px; } |
Langkah 4: Tambahkan Sel Header Tabel
| HTML code | CSS code |
| <div class=“table-header-cell”> Header 1 </div> <div class=“table-header-cell”> Header 2 </div> <div class=“table-header-cell”> Header 3 </div> <div class=“table-header-cell”> Header 4 </div> <div class=“table-header-cell”> Header 5 </div> | .table-header-cell{ display: table-cell; padding: 10px; text-align: justify; border-bottom: 1px solid black; } |
Langkah 5: Buat Badan Tabel
| HTML code | CSS code |
| <div id=“resp-table-body”> </div> | #resp-table-body{ display: table-row-group; } |
Langkah 6: Buat Baris Tabel
| HTML code | CSS code |
| <div class=“resp-table-row”> </div> | .resp-table-row{ display: table-row; } |
Gandakan baris ini sebanyak yang Anda butuhkan untuk membuat tabel sesuai keinginan.
Langkah 7: Buat Sel Tabel di Baris
| HTML code | CSS code |
| <div class=“table-body-cell”> Cell 1–1 </div> <div class=“table-body-cell”> Cell 1–2 </div> <div class=“table-body-cell”> Cell 1–3 </div> <div class=“table-body-cell”> Cell 1–4 </div> <div class=“table-body-cell”> Cell 1–5 </div> | .table-body-cell{ display: table-cell; } |
Salin sel ini di setiap baris yang Anda buat.
Langkah 8: Buat Footer Tabel
| HTML code | CSS code |
| <div id=“resp-table-footer”> </div> | #resp-table-footer { display: table-footer-group; background-color: gray; font-weight: bold; font-size: 25px; color: rgba(255, 255, 255, 0.45); } |
Langkah 9: Tambahkan Sel Footer
| HTML code | CSS code |
| <div class=“table-footer-cell”> Footer 1 </div> <div class=“table-footer-cell”> Footer 2 </div> <div class=“table-footer-cell”> Footer 3 </div> <div class=“table-footer-cell”> Footer 4 </div> <div class=“table-footer-cell”> Footer 5 </div> | .table-footer-cell{ display: table-cell; padding: 10px; text-align: justify; border-bottom: 1px solid black; } |
Sekali lagi, buat sel sebanyak yang dibutuhkan.
Saatnya Menguji
Sekarang, Anda dapat memeriksa template kode Anda dengan membuka halaman HTML di browser. Hasilnya harus seperti ini:
Bagaimana, apakah sudah cukup jelas?
Sekarang, Anda mungkin berpikir bagaimana membuat tabel ini responsif ?! Tapi teman-teman! Anda sudah membuat tabel menjadi responsif!
Tidak percaya ?! Cukup periksa respons halaman yang sama menggunakan alat pengembang atau dengan mengubah ukuran jendela. Takjub?
Semua ini dimungkinkan karena properti 'display' yang Anda gunakan. Pada dasarnya, properti ini responsif. Anda hanya perlu menerapkannya dengan benar. Selebihnya semua diurus oleh browser dan stylesheet Anda. 🙂
Jadi lanjutkan, buat tabel dan bagikan pandangan Anda dengan kami. Kami ingin melihat tabel yang Anda buat!
