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:
- Elemen
<caption> - Elemen
<colgroup> - Elemen
<thead> - Elemen
<tbody> - 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.
Elemen mana yang digunakan untuk menandai sel yang merupakan judul?
<header><caption><th>Informasi mana yang kemungkinan cocok untuk tata letak dengan tabel?
<dl>.<ul>.