Pola Desain Tabel Di Web

Tabel adalah pola desain untuk menampilkan data dalam jumlah besar dalam baris dan kolom, membuatnya efisien untuk melakukan analisis komparatif pada objek kategorikal. Tabel telah digunakan untuk tujuan ini pada ^awal abad ke-2 dan ketika dunia mulai menjadi digital, tabel datang bersama kita.

Tidak dapat dihindari bahwa web akan mendukung tampilan data dalam format tabel. Tabel HTML menyajikan data tabular secara semantik dan secara struktural sesuai. Namun, gaya default pada tabel HTML bukanlah hal yang paling estetis yang pernah Anda lihat. Bergantung pada desain visual yang diinginkan, beberapa upaya diperlukan di bagian depan CSS untuk mempercantik tabel tersebut. Satu dekade yang lalu, sebuah artikel dengan “Top 10 CSS Table Designs” diterbitkan di Smashing Magazine, dan masih terus mendapatkan banyak lalu lintas hingga hari ini.

Web telah banyak berkembang selama dekade terakhir, dan lebih mudah dari sebelumnya untuk membuat situs atau aplikasi Anda beradaptasi dengan viewport yang dilihatnya. Meskipun demikian, kami harus terus membuat pilihan desain yang dipertimbangkan yang tidak berkompromi aksesibilitas. Karena tabel sepertinya tidak akan disukai dalam waktu dekat, mari kita lihat bagaimana tabel dapat dibuat di web pada tahun 2019.

Opsi Hanya CSS

Jika dataset Anda tidak terlalu besar, dan fitur seperti pagination dan sorting tidak diperlukan, maka pertimbangkan opsi bebas JavaScript. Anda bisa mendapatkan beberapa hasil yang cukup bagus yang bekerja dengan baik pada keseluruhan ukuran layar tanpa menambah bobot perpustakaan besar.

Sayangnya, tanpa bantuan JavaScript untuk beberapa manipulasi DOM di bagian depan aksesibilitas, kami hanya memiliki beberapa opsi CSS saja. Tetapi untuk kumpulan data kecil, seringkali sudah cukup.

Opsi 1: Tidak Melakukan Apa-apa

Kami akan memulai dengan skenario upaya rendah. Jika data Anda cocok dengan tabel dengan hanya beberapa kolom dan banyak baris, maka tabel seperti itu cukup siap untuk seluler.

Masalah yang Anda miliki mungkin adalah memiliki terlalu banyak ruang pada layar yang lebih lebar, jadi mungkin disarankan untuk "menutup" lebar maksimum tabel dengan max-width sambil membiarkannya menyusut seperlunya pada layar yang sempit.

Pola semacam ini berfungsi paling baik jika data Anda sendiri bukan baris dan baris teks. Jika mereka numerik, atau frase pendek, Anda mungkin bisa lolos dengan tidak melakukan banyak hal.

Opsi 2: Gaya Gulir

David Bushell menulis tekniknya untuk tabel responsif pada tahun 2012, yang melibatkan pemanggilan overflow dan memungkinkan pengguna untuk menggulir untuk melihat lebih banyak data. Orang dapat berargumen bahwa ini bukan solusi yang responsif, tetapi secara teknis, wadah merespons lebar viewport.

Mari kita lihat overflow "dasar" terlebih dahulu. Bayangkan saya menggunakan kutipan udara di sekitar dasar, karena gaya untuk bayangan bergulir sama sekali tidak. Namun, dalam hal ini, "dasar" mengacu pada fakta bahwa tabel tidak berubah dengan cara apa pun.

Teknik melakukan scrolling shadow ini berasal dari Roma Komarov dan Lea Verou yang saling bertukar ide untuk menciptakan keajaiban. Ini bergantung pada penggunaan beberapa gradien (linier dan radial) sebagai gambar latar belakang pada elemen yang mengandung, dan menggunakan background-attachment: local untuk memposisikan latar belakang relatif terhadap isinya.

Yang menarik dari teknik ini adalah untuk browser yang tidak mendukung scrolling shadows, Anda masih dapat menggulir tabel seperti biasa. Itu tidak merusak tata letak sama sekali.

Opsi pengguliran lainnya adalah membalik header tabel dari konfigurasi baris ke konfigurasi kolom, sambil menerapkan pengguliran horizontal ke konten elemen <tbody> . Teknik ini memanfaatkan perilaku Flexbox untuk mengubah baris tabel menjadi kolom.

Dengan menerapkan display: flex ke tabel, itu membuat <thead> dan <tbody> keduanya menjadi anak-anak flex, yang secara default diletakkan bersebelahan pada garis flex yang sama.

Kami juga membuat elemen <tbody> menjadi wadah fleksibel, sehingga membuat semua elemen <tr> di dalamnya menjadi anak-anak fleksibel yang diletakkan dalam satu garis fleksibel juga. Terakhir, setiap sel tabel harus memiliki tampilan yang disetel untuk block alih-alih table-cell default.

Keuntungan dari teknik ini adalah bahwa header selalu terlihat, seperti efek header tetap, sehingga pengguna tidak kehilangan konteks saat mereka menggulir kolom data. Satu hal yang perlu diperhatikan adalah bahwa teknik ini menghasilkan perbedaan urutan visual dan sumber, dan ini membuat segalanya sedikit tidak intuitif.

Taburkan Pada Beberapa JavaScript

Seperti disebutkan sebelumnya, opsi tata letak yang melibatkan morphing tabel dengan memodifikasi nilai display terkadang memiliki implikasi negatif untuk aksesibilitas, yang memerlukan beberapa manipulasi DOM kecil untuk diperbaiki.

Selain itu, ada sejumlah tips pengalaman pengguna dalam mendesain tabel data dari Andrew Coyle, termasuk fitur seperti pagination, sorting, filtering, dan sebagainya (fitur yang memang memerlukan beberapa JavaScript untuk diaktifkan).

Jika Anda bekerja dengan kumpulan data yang relatif lebih sederhana, mungkin Anda ingin menulis fungsi Anda sendiri untuk beberapa fitur ini.

Baris Ke Blok, Dengan Perbaikan Aksesibilitas

Sejauh yang saya tahu, teknik tabel data responsif ini muncul dari artikel CSS-Tricks "Tabel Data Responsif" oleh Chris Coyier pada tahun 2011. Sejak itu telah diadaptasi dan diperluas oleh banyak orang lain.

Inti dari teknik ini adalah memanfaatkan kueri media untuk mengalihkan properti tampilan elemen tabel dan turunannya untuk block pada area pandang yang sempit.

Pada layar sempit, header tabel disembunyikan secara visual, tetapi masih ada di pohon aksesibilitas. Dengan menerapkan atribut data ke sel tabel, kita kemudian dapat menampilkan label untuk data melalui CSS, sambil menjaga konten label dalam HTML. Silakan merujuk ke CodePen di bawah ini untuk mengetahui tampilan mark-up dan gaya:

Metode asli menerapkan lebar pada elemen semu yang menampilkan teks label, tetapi itu berarti Anda perlu mengetahui jumlah ruang yang dibutuhkan label Anda untuk memulai. Contoh di atas menggunakan pendekatan yang sedikit berbeda, di mana label dan data masing-masing berada di sisi berlawanan dari blok yang memuatnya.

Kami dapat mencapai efek seperti itu melalui margin otomatis dalam konteks pemformatan fleksibel. Jika kita mengatur properti tampilan untuk setiap elemen <td> menjadi fleksibel, karena elemen semu menghasilkan kotak seolah-olah mereka adalah anak langsung dari elemen asalnya, mereka menjadi anak fleksibel dari <td> .

Setelah itu, ini adalah masalah pengaturan margin-right: auto pada elemen semu untuk mendorong konten sel ke ujung sel yang paling ujung.

Pendekatan lain melakukan tata letak viewport sempit menggunakan kombinasi Grid dan display: contents . Harap dicatat bahwa display: contents di browser pendukung memiliki masalah dengan aksesibilitas saat ini, dan metode ini tidak boleh digunakan dalam produksi sampai bug tersebut diperbaiki.

Tapi mungkin Anda membaca ini setelah bug tersebut diselesaikan, dalam hal ini, inilah opsi tata letak alternatif.

Setiap elemen <tr> diatur untuk display: grid , dan setiap elemen <td> diatur untuk display: contents . Hanya anak-anak langsung dari wadah kisi yang berpartisipasi dalam konteks pemformatan kisi; dalam hal ini, ini adalah elemen <td> .

Ketika display: contents diterapkan ke <td> , itu akan "diganti" oleh isinya, dalam hal ini, elemen pseudo dan <span> di dalam <td> menjadi anak-anak grid sebagai gantinya.

Yang saya sukai dari pendekatan ini adalah kemampuan untuk menggunakan max-content untuk mengukur kolom elemen semu, memastikan bahwa kolom akan selalu menjadi lebar label terpanjang, tanpa kita harus menetapkan nilai lebar secara manual.

Di masa mendatang, ketika nilai ukuran min-content , max-content dan fit-content (dicakup oleh CSS Intrinsic & Extrinsic Sizing Module Level 3) didukung sebagai nilai width dan height umum, kita akan memiliki lebih banyak opsi untuk meletakkan hal-hal keluar.

Kelemahan dari pendekatan ini adalah Anda membutuhkan <span> atau <p> tambahan di sekitar konten di sel tabel Anda jika belum memilikinya, jika tidak, tidak akan ada cara untuk menerapkan gaya padanya.

Paginasi Sederhana

Contoh ini menunjukkan implementasi pagination dasar yang dimodifikasi dari CodePen ini oleh Gjore Milevski menjadi paginasi pada baris tabel, bukan div. Ini adalah perpanjangan dari contoh "gaya gulir" yang dibahas di bagian sebelumnya.

Dari perspektif tata letak, Flexbox sangat berguna untuk memposisikan elemen pagination di berbagai ukuran viewport. Desain proyek yang berbeda akan memiliki persyaratan yang berbeda, tetapi keserbagunaan Flexbox akan memungkinkan Anda untuk memenuhi perbedaan ini.

Dalam hal ini, pagination dipusatkan pada halaman dan di atas tabel. Kontrol untuk menavigasi mundur dan maju ditempatkan di kedua sisi indikator halaman pada layar yang lebih lebar, tetapi keempatnya muncul di atas indikator halaman pada layar sempit.

Kita dapat melakukan ini dengan memanfaatkan properti order . Pengurutan ulang konten secara visual harus selalu dilakukan dengan pertimbangan karena properti ini tidak mengubah urutan sumber — hanya tampilannya di layar.

Penyortiran Sederhana

Contoh ini menunjukkan implementasi pengurutan dasar yang dimodifikasi dari cuplikan kode ini oleh Peter Noble untuk memenuhi teks dan angka:

Akan berguna untuk memiliki semacam indikator kolom mana yang saat ini sedang diurutkan dan dalam urutan apa. Kita dapat melakukannya dengan penambahan kelas CSS yang kemudian dapat ditata sesuai keinginan Anda. Dalam hal ini, simbol indikator adalah elemen semu yang diaktifkan saat header target diklik.

Pencarian Sederhana

Contoh ini adalah fungsi pemfilteran dasar yang mengulangi semua konten tekstual dari setiap sel tabel dan menerapkan kelas CSS untuk menyembunyikan semua baris yang tidak cocok dengan bidang input pencarian.

Implementasi seperti itu relatif naif, dan jika kasus penggunaan Anda membutuhkannya, mungkin masuk akal untuk mencari per kolom sebagai gantinya. Dalam skenario itu, mungkin ide yang baik untuk memiliki setiap bidang input sebagai bagian dari tabel di kolom masing-masing.

Biarkan Perpustakaan Menanganinya

Cuplikan JavaScript di atas berfungsi untuk menunjukkan bagaimana tabel dengan jumlah data yang lebih besar dapat ditingkatkan untuk membuat hidup lebih mudah bagi pengguna tabel tersebut. Tetapi dengan kumpulan data yang sangat besar, mungkin masuk akal untuk menggunakan pustaka yang ada untuk mengelola tabel besar Anda.

Pola pengalih kolom adalah pola di mana kolom yang tidak penting disembunyikan di layar yang lebih kecil. Biasanya, saya bukan penggemar menyembunyikan konten hanya karena viewport sempit, tetapi pendekatan ini oleh Maggie Costello Wachs dari Filament Group menyelesaikan masalah saya dengan menyediakan menu drop-down yang memungkinkan pengguna untuk mengaktifkan kembali kolom tersembunyi ke melihat.

Artikel di atas diterbitkan kembali pada tahun 2011, tetapi Filament Group telah mengembangkan rangkaian lengkap plugin tabel responsif yang dikenal sebagai Tablesaw, yang mencakup fitur seperti penyortiran, pemilihan baris, internasionalisasi, dan sebagainya.

Fitur toggle kolom di TableSaw juga tidak lagi bergantung pada jQuery, tidak seperti contoh dari artikel aslinya. Tablesaw adalah satu-satunya perpustakaan yang saya temukan yang tidak memiliki ketergantungan pada jQuery saat ini.

Membungkus

Ada banyak sekali pola desain tabel di luar sana, dan pendekatan mana yang Anda pilih sangat bergantung pada jenis data yang Anda miliki dan audiens target untuk data tersebut. Pada akhirnya, tabel adalah metode untuk organisasi dan penyajian data. Penting untuk mengetahui informasi mana yang paling penting bagi pengguna Anda dan memutuskan pendekatan yang paling sesuai dengan kebutuhan mereka.

Bacaan lebih lanjut

• “Tabel Responsif Khusus CSS,” David Bushell
• “Tabel yang Dapat Diakses, Sederhana, dan Responsif,” Davide Rizzo, Trik-CSS
• “Tata Letak Meja Responsif,” Matt Smith
• “Pola Responsif: Tabel,” Brad Frost
• “Hei, Masih Boleh Menggunakan Meja,” Adrian Roselli
• “Tabel, Properti Tampilan CSS, dan ARIA,” Adrian Roselli
• “Tabel Data,” Heydon Pickering