Tabel

Tabel HTML digunakan untuk menampilkan data tabulasi berisi baris dan kolom. Keputusan untuk menggunakan <table> harus didasarkan pada konten yang Anda presentasikan dan pengguna yang dibutuhkan dalam kaitannya dengan konten tersebut. Jika data sedang disajikan, dibandingkan, disortir, dihitung, atau direferensikan silang, maka <table> mungkin merupakan pilihan yang tepat. Jika Anda hanya ingin menata konten non-tabel dengan rapi, seperti kelompok besar gambar thumbnail, tabel itu tidak sesuai: sebagai gantinya, buat daftar gambar dan menata gaya grid dengan CSS.

Di bagian ini, kita akan membahas semua elemen yang membentuk tabel, bersama dengan beberapa fitur aksesibilitas dan {i>usability<i} perlu dipertimbangkan saat Anda mempresentasikan data tabel. Meskipun Belajar HTML tidak secara mendasar tentang CSS, dan ada seluruh materi khusus 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 bahwa elemen ini adalah struktur tabel yang berisi data yang diatur di 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, secara opsional, footer tabel (<tfoot>). Masing-masing terdiri dari baris tabel (<tr>). Baris berisi sel header tabel (<th>) dan data tabel (<td>) yang, pada gilirannya, berisi semua data. Di DOM, sebelum semua ini, Anda mungkin menemukan dua fitur tambahan: teks tabel (<caption>) dan grup kolom (<colgroup>). Bergantung apakah <colgroup> memiliki atribut span atau tidak, elemen 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 <table> elemen turunan, yang semuanya opsional tetapi direkomendasikan, maka lihat baris, sel {i>header<i} tabel, dan sel data tabel. <colgroup> akan dibahas terakhir.

Teks tabel

Sebagai elemen semantik native, <caption> lebih disarankan metode pemberian nama ke sebuah tabel. <caption> menyediakan judul tabel deskriptif yang terkait secara terprogram. Penting terlihat dan tersedia untuk semua pengguna secara {i>default<i}.

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

Caption akan muncul di luar tabel. Lokasi teks dapat disetel 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. Kiri dan kanan pemosisian sisi, 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 dapat dipahami dengan jelas. Perlu diingat bahwa tidak semua pengguna memiliki kemampuan kognitif yang sama. Jika tabel "memberikan poin", atau memerlukan interpretasi, berikan ringkasan singkat mengenai poin atau fungsi utama dari tabel itu. Penempatan ringkasan tersebut bergantung pada panjang dan kompleksitasnya. Jika singkat, gunakan sebagai teks dalam teks. Jika lebih panjang, rangkum dalam teks, dan berikan ringkasan di bagian sebelum tabel, yang mengaitkan keduanya dengan aria-describedby . Menempatkan tabel dalam <figure> dan menempatkan ringkasan di <figcaption> adalah opsi lain.

Pembagian data

Konten tabel terdiri atas maksimal tiga bagian: nol atau beberapa header tabel (<thead>) , isi tabel (<tbody>), dan footer tabel (<tfoot>). Semua bersifat opsional, masing-masing nol atau beberapa di antaranya didukung.

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

Apa yang kami miliki sejauh ini:

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

Elemen <tfoot> awalnya ditentukan agar 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 {i>header<i}, isi, dan {i>footer<i} tabel, tetapi tidak satu pun dari tabel ini yang benar-benar melakukan sesuatu jika tabelnya 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> dengan posisi tengah dan tebal. Gaya {i>default<i} ini, dan semua gaya visual sebaiknya dikontrol dengan CSS daripada atribut yang tidak digunakan lagi yang biasanya tersedia di tiap sel, baris, dan bahkan <table>.

Ada atribut untuk menambahkan {i>padding<i} di antara sel dan di dalam sel, untuk batas, dan untuk perataan teks. Cellpadding dan cellpacing, yang menentukan ruang antara konten sel dan batasnya, dan di antara batas sel yang berdekatan, harus diatur dengan border-ciutkan dan border-spacing pada CSS masing-masing. Border-spacing tidak akan berpengaruh jika border-collapse: collapse disetel. Jika border-collapse: separate; disetel, Anda dapat menyembunyikan sel kosong sepenuhnya dengan empty-cells: hide;. Untuk mempelajari lebih lanjut gaya visual tabel, berikut adalah dek slide interaktif dari gaya CSS terkait tabel.

Dalam contoh, kita telah menambahkan batas pada tabel dan setiap sel individual dengan CSS untuk membuat beberapa fitur lebih jelas:

Dalam contoh ini, kita memiliki keterangan, {i>header<i} tabel, dan isi tabel. Header memiliki satu baris yang berisi tiga sel <th> header, sehingga akan menghasilkan tiga kolom. Isi 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 dari columnheader atau rowheader. Fungsi ini mendefinisikan sel sebagai {i>header<i} untuk kolom atau baris sel tabel, bergantung pada nilai atribut scope yang dienumerasi. Browser akan menetapkan col atau row secara default jika scope tidak disetel 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" dari "Lou Minious". Dalam contoh ini, seperti yang dapat kita lihat di seluruh tabel, pengaitan terlihat jelas secara visual. Penggunaan <th> akan memberikan pengaitan meskipun kolom atau baris header telah di-scroll keluar dari tampilan. Kita bisa secara eksplisit menetapkan <th scope="col">Year</th> dan <th scope="row">Lou Minious</th>, tetapi dengan tabel sederhana seperti ini, nilai default yang dienumerasi akan berfungsi. Nilai lain untuk scope mencakup rowgroup dan colgroup, yang berguna dengan tabel kompleks.

Menggabungkan sel

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

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

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

Jika sel ditentukan oleh beberapa sel header dengan pengaitan yang tidak dapat ditetapkan hanya dengan atribut scope, sertakan atribut headers dengan daftar yang dipisahkan spasi dari header terkait. Karena contoh ini adalah tabel yang lebih kompleks, kita secara eksplisit mendefinisikan cakupan header dengan atribut scope. Agar lebih jelas, kami menambahkan atribut headers ke setiap sel.

Dalam kasus penggunaan yang sederhana seperti itu, atribut headers mungkin tidak diperlukan, tetapi atribut tersebut penting untuk dimiliki di panel menu Anda sebagai tabel Anda menjadi makin rumit. Tabel dengan struktur yang kompleks, seperti tabel dengan header atau sel digabungkan atau yang lainnya dari dua tingkat {i>header <i}kolom atau baris, memerlukan identifikasi eksplisit dari sel {i>header<i} yang terkait. Dalam tabel yang begitu kompleks, secara eksplisit mengaitkan 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 mungkin 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 {i>header<i}, akan lebih mudah dipahami. Iklan juga lebih mudah dikelola!

Gaya visual 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. Tujuan Elemen <colgroup> digunakan untuk menentukan grup kolom, atau elemen <col>, dalam tabel.

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

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

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

Baik <colgroup> maupun <col> tidak memiliki arti semantik dalam hal membantu membuat tabel lebih mudah diakses, tetapi keduanya memungkinkan untuk penataan gaya kolom terbatas, termasuk menyetel lebar 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 menyorot kolom ke-8 secara penuh atau akan menyorot kolom ke-8 untuk beberapa baris, tetapi dengan sejumlah sel kolom 9 dan 10, tergantung pada sel baris atau kolom apa yang digabungkan.

Sayangnya, hanya beberapa properti yang didukung, gaya tidak diwarisi ke dalam sel, dan satu-satunya cara untuk menggunakan <col> dalam sel penargetan adalah dengan pemilih kompleks yang mencakup 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, kelompok baris, baris, dengan sel berada di urutan terakhir dan paling atas, seperti yang ditampilkan dalam skema tabel lapisan. Elemen <td> dan <th> bukanlah turunan dari elemen <colgroup> atau <col>, dan tidak mewarisi gayanya.

Untuk menggarisbawahi tabel, pemilih struktural CSS sangat 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 dalam isi tabel, sehingga efek latar belakang yang disetel pada <colgroup> akan terlihat.

Tabel tidak responsif secara default. Namun, secara default, ukurannya akan disesuaikan dengan kontennya. Diperlukan tindakan ekstra untuk mendapatkan tabel agar dapat bekerja secara efektif di berbagai perangkat. Jika Anda mengubah properti tampilan CSS untuk elemen tabel, menyertakan atribut role ARIA. Meskipun hal tersebut 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 'tersesat'. Elemen <table> tidak boleh digunakan untuk presentasi. Jika Anda memerlukan judul di atas 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. Anggap saja seperti ini: jika data Anda memerlukan spreadsheet untuk dipresentasikan di sebuah pertemuan, gunakan <table>. Jika ingin menggunakan fitur yang tersedia dalam software presentasi seperti Keynote atau Powerpoint, Anda mungkin memerlukan daftar deskripsi.

Sementara menyortir kolom tabel adalah cakupan JavaScript, menandai {i>header<i} akan memberi tahu pengguna bahwa kolom tersebut dapat diurutkan adalah HTML. Beri tahu pengguna bahwa kolom tabel dapat diurutkan dengan ikonografi yang menampilkan menaik, menurun, atau tidak diurutkan. Kolom yang saat ini diurutkan seharusnya sertakan atribut aria-sort dengan nilai terenumerasi dari arah pengurutan. <caption> dapat dengan sopan mengumumkan pembaruan untuk tata urutan melalui aria-live dan 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 tabulasi, jangan gunakan <table>. Jika Anda menggunakan tabel untuk presentasi, setel 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.