Tabel

Tabel HTML digunakan untuk menampilkan data tabel dengan baris dan kolom. Keputusan untuk menggunakan <table> harus didasarkan pada konten yang Anda presentasikan dan kebutuhan pengguna sehubungan dengan konten tersebut. Jika data ditampilkan, dibandingkan, diurutkan, dihitung, atau direferensikan silang, <table> mungkin merupakan pilihan yang tepat. Jika Anda hanya ingin menata gaya konten non-tabular dengan rapi, seperti sekumpulan besar gambar thumbnail, tabel tidak akan sesuai: sebagai gantinya, buat daftar gambar dan tata gaya kisi dengan CSS.

Di bagian ini, kita akan membahas semua elemen yang membentuk tabel, beserta beberapa fitur aksesibilitas dan kegunaan yang harus Anda pertimbangkan saat mempresentasikan data tabel. Meskipun Belajar HTML pada dasarnya tidak tentang CSS, dan ada kursus khusus yang dikhususkan untuk mempelajari CSS, kita akan membahas beberapa properti CSS khusus tabel.

Elemen tabel, secara berurutan

Tag <table> menggabungkan konten tabel, termasuk semua elemen tabel. Peran ARIA implisit <table> adalah table; teknologi pendukung mengetahui elemen ini adalah struktur tabel yang berisi data yang diatur dalam baris dan kolom. Jika tabel mempertahankan status pemilihan, memiliki navigasi dua dimensi, atau memungkinkan pengguna mengatur ulang urutan sel, tetapkan role="grid". Jika baris grid dapat diperluas dan diciutkan, gunakan role="treegrid".

Di dalam <table>, Anda akan menemukan header tabel (<thead>), isi tabel (<tbody>), dan, jika perlu, footer tabel (<tfoot>). Masing-masing terdiri dari baris tabel (<tr>). Baris berisi sel header tabel (<th>) dan data tabel (<td>) yang nantinya berisi semua data. Di DOM, sebelum semua fitur ini, Anda mungkin menemukan dua fitur tambahan: teks tabel (<caption>) dan grup kolom (<colgroup>). Bergantung pada apakah <colgroup> memiliki atribut span atau tidak, kolom tersebut dapat berisi elemen kolom tabel bertingkat (<col>).

Turunan tabel adalah, secara berurutan:

1. Elemen <caption>
2. Elemen <colgroup>
3. Elemen <thead>
4. Elemen <tbody>
5. Elemen <tfoot>

Kita akan membahas turunan elemen <table>, yang semuanya bersifat opsional tetapi direkomendasikan, lalu kita lihat baris, sel header tabel, dan sel data tabel. <colgroup> akan dibahas terakhir.

Teks tabel

Karena merupakan elemen semantik native, <caption> adalah metode yang lebih disukai untuk memberikan nama ke tabel. <caption> memberikan judul tabel deskriptif yang terkait secara terprogram. Label ini terlihat dan tersedia untuk semua pengguna secara default.

Elemen <caption> harus menjadi elemen pertama yang bertingkat dalam elemen <table>. Dengan menyertakannya, semua pengguna dapat langsung mengetahui tujuan tabel tanpa harus membaca teks di sekitarnya. Atau, Anda dapat menggunakan aria-label atau aria-labelledby pada <table> untuk memberikan nama yang dapat diakses sebagai teks. Elemen <caption> tidak memiliki atribut khusus elemen.

Teks muncul di luar tabel. Lokasi teks dapat ditetapkan dengan properti caption-side CSS, yang merupakan praktik yang lebih baik daripada menggunakan atribut align yang tidak digunakan lagi. Ini dapat menyetel teks ke bagian atas dan bawah. Pemosisian sisi kiri dan kanan, dengan inline-start dan inline-end, belum didukung sepenuhnya. Bagian atas adalah presentasi browser default.

Sebaiknya, tabel data harus memiliki {i>header<i} dan keterangan yang jelas, dan cukup sederhana sehingga hampir bisa dipahami. Perlu diingat bahwa tidak semua pengguna memiliki kemampuan kognitif yang sama. Jika tabel "menetapkan poin", atau memerlukan interpretasi, berikan ringkasan singkat tentang poin utama atau fungsi tabel tersebut. Penempatan ringkasan tersebut bergantung pada panjang dan kompleksitasnya. Jika singkat, gunakan sebagai teks dalam teks. Jika lebih panjang, rangkum teks tersebut dalam teks, dan berikan ringkasan dalam paragraf sebelum tabel, dengan mengaitkan keduanya dengan atribut aria-describedby. Menempatkan tabel dalam <figure> dan menempatkan ringkasan di <figcaption> adalah opsi lain.

Pembagian data

Konten tabel terdiri dari hingga tiga bagian: nol atau beberapa header tabel (<thead>) , isi tabel (<tbody>), dan footer tabel (<tfoot>). Semuanya bersifat opsional, dengan nol atau beberapa header yang didukung.

Elemen-elemen ini tidak membantu atau menghambat aksesibilitas tabel, tetapi mereka berguna dalam hal kegunaan. Mereka menyediakan kait penataan gaya. Misalnya, konten header dapat dibuat melekat, sedangkan konten <tbody> dapat dibuat untuk di-scroll. Baris yang tidak disarangkan dalam salah satu dari tiga elemen yang memuatnya secara implisit digabungkan dalam <tbody>. Ketiganya memiliki peran implisit yang sama rowgroup. Tak satu pun dari tiga elemen ini memiliki atribut khusus elemen.

Yang kami miliki sejauh ini:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

Elemen <tfoot> awalnya ditentukan untuk muncul tepat setelah <thead> dan sebelum <tbody> karena alasan aksesibilitas. Itulah sebabnya Anda mungkin menemukan urutan sumber yang tidak intuitif ini di codebase lama.

Isi tabel

Tabel dapat dibagi menjadi header, isi, dan footer tabel, tetapi tidak ada yang benar-benar berfungsi jika tabel tidak berisi baris tabel, sel, dan konten. Setiap baris tabel, <tr> berisi satu atau beberapa sel. Jika sel adalah sel header, gunakan <th>. Jika tidak, gunakan <td>.

Stylesheet agen pengguna umumnya menampilkan konten dalam sel header tabel <th> sebagai di tengah dan tebal. Gaya default ini, dan semua gaya visual, paling baik dikontrol dengan CSS, bukan atribut yang tidak digunakan lagi yang sebelumnya tersedia di sel individual, baris, dan bahkan <table>.

Ada atribut untuk menambahkan padding di antara sel dan di dalam sel, untuk batas, dan untuk perataan teks. Cellpadding dan cellspacing, yang menentukan ruang antara konten sel dan batasnya, serta di antara batas sel yang berdekatan, harus disetel dengan properti border-collapse dan border-spacing CSS. Border-spacing tidak akan berpengaruh jika border-collapse: collapse disetel. Jika border-collapse: separate; ditetapkan, sel kosong dapat disembunyikan dengan empty-cells: hide;. Untuk mempelajari lebih lanjut cara menata gaya tabel, berikut adalah kumpulan slide interaktif untuk gaya CSS terkait tabel.

Dalam contoh, kita telah menambahkan garis batas pada tabel dan setiap sel dengan CSS agar beberapa fitur terlihat lebih jelas:

Dalam contoh ini, kita memiliki teks, {i>header<i} tabel, dan isi tabel. Header memiliki satu baris yang berisi tiga sel <th> header, sehingga membuat tiga kolom. Isinya berisi tiga baris data: sel pertama adalah sel header untuk baris tersebut, jadi kita menggunakan <th>, bukan <td>.

Sel <th> memiliki makna semantik, dengan peran ARIA implisit columnheader atau rowheader. Ini menentukan sel sebagai header untuk kolom atau baris sel tabel, bergantung pada nilai atribut scope yang dienumerasi. Browser akan disetel secara default ke col atau row jika scope tidak ditetapkan secara eksplisit. Karena kita telah menggunakan markup semantik, sel 1956 memiliki dua header: Year dan Lou Minious. Asosiasi ini memberitahu kita bahwa "1956" adalah "tahun" kelulusan untuk "Lou Minious". Dalam contoh ini, seperti yang dapat dilihat di seluruh tabel, pengaitan terlihat jelas secara visual. Penggunaan <th> akan memberikan pengaitan meskipun kolom atau baris header telah di-scroll hingga keluar dari tampilan. Kita dapat menetapkan <th scope="col">Year</th> dan <th scope="row">Lou Minious</th> secara eksplisit, tetapi dengan tabel sederhana seperti ini, nilai default yang dienumerasi berfungsi. Nilai lain untuk scope mencakup rowgroup dan colgroup, yang berguna dengan tabel kompleks.

Menggabungkan sel

Mirip dengan MS Excel, Google Sheets, dan Numbers, beberapa sel dapat digabungkan ke dalam satu sel. Hal ini dilakukan dengan HTML! Atribut colspan digunakan untuk menggabungkan dua sel yang berdekatan atau lebih dalam satu baris. Atribut rowspan digunakan untuk menggabungkan sel di seluruh baris, yang ditempatkan pada sel di baris atas.

Dalam contoh ini, header tabel berisi dua baris. Baris header pertama berisi tiga sel yang mencakup empat kolom: sel tengah memiliki colspan="2". Tindakan ini akan menggabungkan dua sel yang berdekatan. Sel pertama dan terakhir menyertakan rowspan="2". {i>Function<i} ini menggabungkan sel dengan sel di baris yang bersebelahan, tepat di bawahnya.

Baris kedua pada {i>header<i} tabel berisi dua sel; yaitu sel untuk kolom kedua dan ketiga pada baris kedua. Tidak ada sel yang dideklarasikan untuk kolom pertama atau terakhir karena sel di kolom pertama dan terakhir di baris pertama mencakup dua baris.

Jika sel ditentukan oleh beberapa sel header dengan asosiasi yang tidak dapat ditetapkan oleh atribut scope saja, sertakan atribut headers dengan daftar header terkait yang dipisahkan spasi. Karena contoh ini adalah tabel yang lebih kompleks, kami secara eksplisit menentukan cakupan header dengan atribut scope. Untuk lebih jelasnya, kami menambahkan atribut headers ke setiap sel.

Atribut headers mungkin tidak diperlukan dalam kasus penggunaan yang begitu sederhana, tetapi atribut tersebut penting untuk dimiliki di panel menu saat tabel Anda semakin kompleks. Tabel dengan struktur yang kompleks, seperti tabel dengan header atau sel yang digabungkan, atau dengan lebih dari dua tingkat header kolom atau baris, memerlukan identifikasi eksplisit sel header terkait. Dalam tabel yang kompleks seperti itu, secara eksplisit kaitkan setiap sel data dengan setiap sel header yang sesuai dengan daftar nilai id yang dipisahkan spasi dari semua header terkait sebagai nilai atribut headers.

Atribut headers lebih umum ditemukan pada elemen <td>, tetapi juga valid pada <th>.

Meskipun demikian, struktur tabel yang kompleks bisa sulit dipahami oleh semua pengguna, bukan hanya pengguna pembaca layar. Secara kognitif dan dalam hal dukungan pembaca layar, tabel yang lebih sederhana, dengan sedikit atau tanpa sel yang dibentangkan, bahkan tanpa menambahkan cakupan dan header, lebih mudah dipahami. Mereka juga lebih mudah dikelola.

Menata gaya tabel

Ada dua elemen yang relatif tidak jelas yang disebutkan secara singkat: grup kolom, <colgroup>, elemen dan satu-satunya turunannya, elemen kolom <col> yang kosong. Elemen <colgroup> digunakan untuk menentukan grup kolom, atau elemen <col>, dalam tabel.

Jika digunakan, pengelompokan kolom harus ditempatkan di <table>, tepat setelah <caption> dan sebelum data tabel apa pun. Jika mencakup lebih dari satu kolom, gunakan atribut span.

Urutan garis batas konten untuk tabel umumnya sebagai berikut, dengan <table> dan <caption> adalah dua elemen yang harus disertakan:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup> atau <col> tidak memiliki makna semantik dalam hal membantu membuat tabel lebih mudah diakses, tetapi keduanya memungkinkan gaya visual kolom terbatas, termasuk penetapan lebar untuk kolom dengan CSS.

Gaya <col> akan menata gaya kolom selama tidak ada gaya <td> atau <th> yang mengganti gaya tersebut. Misalnya, ketika <colspan> digunakan untuk menggabungkan sel di beberapa baris tabel, tetapi tidak semua, Anda tidak dapat memastikan bahwa pemilih seperti tr > *:nth-child(8), yang memilih turunan ke-8 dari setiap baris, akan menandai kolom ke-8 secara penuh atau akan menyoroti kolom ke-8 untuk beberapa baris, tetapi dengan beberapa sel kolom ke-9 dan ke-10, tergantung pada sel baris atau kolom mana yang digabungkan.

Sayangnya, hanya beberapa properti yang didukung, gaya tidak diwariskan ke dalam sel, dan satu-satunya cara untuk menggunakan elemen <col> dalam sel penargetan adalah dengan pemilih kompleks termasuk pemilih relasional :has().

Jika <table> dan <colgroup> memiliki warna latar belakang, background-color dari <colgroup> akan berada di atas. Urutan gambar adalah: tabel, grup kolom, kolom, rowgroup, baris, dengan sel terakhir dan di atas, seperti yang ditunjukkan dalam skema lapisan tabel. Elemen <td> dan <th> bukan turunan dari elemen <colgroup> atau <col>, dan tidak mewarisi gayanya.

Untuk membuat garis pada tabel, pemilih struktural CSS berguna. Misalnya, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} akan menambahkan warna hitam transparan ke setiap baris ganjil di isi tabel, sehingga efek latar belakang yang ditetapkan pada <colgroup> akan ditampilkan.

Tabel tidak responsif secara default. Namun, ukuran layar disesuaikan dengan kontennya secara default. Tindakan tambahan diperlukan agar gaya tata letak tabel dapat berfungsi secara efektif di berbagai perangkat. Jika Anda mengubah properti tampilan CSS untuk elemen tabel, sertakan atribut role ARIA. Meskipun mungkin terdengar berlebihan, properti display CSS dapat memengaruhi hierarki aksesibilitas di beberapa browser.

Menyajikan data

Elemen tabel memiliki makna semantik yang digunakan oleh teknologi pendukung untuk memungkinkan navigasi melalui baris dan kolom tanpa 'hilang'. Elemen <table> tidak boleh digunakan untuk presentasi. Jika Anda memerlukan judul pada daftar, gunakan header dan daftar. Jika Anda ingin menata konten dalam banyak kolom, gunakan tata letak multi-kolom. Jika Anda ingin menata konten dalam petak, gunakan petak CSS. Hanya gunakan tabel untuk data. Pikirkan seperti ini: jika data Anda memerlukan spreadsheet agar dapat dipresentasikan saat rapat, gunakan <table>. Jika ingin menggunakan fitur yang tersedia dalam software presentasi seperti Keynote atau Powerpoint, Anda mungkin memerlukan daftar deskripsi.

Meskipun mengurutkan kolom tabel adalah cakupan JavaScript, menandai header Anda untuk memberi tahu pengguna bahwa kolom yang dapat diurutkan adalah cakupan HTML. Beri tahu pengguna bahwa kolom tabel dapat diurutkan dengan ikonografi yang menunjukkan menaik, menurun, atau tidak diurutkan. Kolom yang saat ini diurutkan harus menyertakan atribut aria-sort dengan nilai terenumerasi arah pengurutan. <caption> dapat dengan sopan mengumumkan update untuk mengurutkan tata urutan melalui aria-live dan span yang diperbarui secara dinamis, dan yang terlihat oleh pengguna pembaca layar. Karena kolom dapat diurutkan dengan mengklik konten header, konten header harus berupa <button>.

Jika Anda tidak mempresentasikan data tabel, jangan gunakan <table>. Jika Anda menggunakan tabel untuk presentasi, tetapkan role="none".

Banyak developer menggunakan tabel untuk menata formulir, tetapi hal ini tidak perlu dilakukan. Tetapi Anda perlu mengetahui tentang formulir HTML, jadi kita akan membahasnya selanjutnya.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang tabel.