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 ..
Jadi, ini semua tentang CSS?
Bagaimana cara menggunakan properti 'display' untuk merepresentasikan tabel?
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; } |
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; } |
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; } |
Saatnya Menguji
Bagaimana, apakah sudah cukup jelas?
![](https://4.bp.blogspot.com/-1GF1eNGMoyg/Wkn-myO54LI/AAAAAAAAFaw/qHLFX_RY4gE0oyBwD2zDW_pNsR1pXdF9gCLcBGAs/s1600/puma2.jpg)