Tabel

Tabel HTML menampilkan data tabular dengan baris dan kolom. Anda harus memilih untuk menggunakan <table> berdasarkan konten yang Anda tampilkan dan kebutuhan pengguna Anda terkait konten tersebut. Jika data sedang disajikan, dibandingkan, diurutkan, dihitung, atau dirujuk silang, maka <table> mungkin adalah pilihan yang tepat. Jika Anda tertarik untuk mengatur konten yang tidak berbentuk tabel, seperti sekelompok besar gambar thumbnail, tabel tidak cocok. Sebagai gantinya, buat daftar gambar dan beri gaya pada petak dengan CSS.

Di bagian ini, kita akan membahas semua elemen yang membentuk tabel, beserta beberapa fitur aksesibilitas dan kegunaan yang perlu dipertimbangkan saat menyajikan data tabel. Meskipun Learn HTML tidak berfokus pada CSS, kita akan membahas beberapa properti CSS khusus tabel. Untuk mengetahui CSS lebih lanjut, ikuti Learn CSS.

Elemen tabel, secara berurutan

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

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

Turunan tabel, dalam urutan:

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 melihat baris, sel header tabel, dan sel data tabel. <colgroup> akan dibahas terakhir.

Teks tabel

Metode yang lebih disukai untuk memberi nama tabel adalah elemen semantik, <caption>. <caption> memberikan judul tabel deskriptif yang terkait secara terprogram. Secara default, fitur ini terlihat dan tersedia untuk semua pengguna.

Elemen <caption> harus menjadi elemen pertama yang disarangkan 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 di <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 CSS caption-side, yang merupakan praktik yang lebih baik daripada menggunakan atribut align yang tidak digunakan lagi. Tindakan ini dapat menyetel teks ke bagian atas dan bawah. Penempatan sisi kiri dan kanan, dengan inline-start dan inline-end, belum sepenuhnya didukung. Top adalah presentasi browser default.

Sebaiknya, tabel data harus memiliki header dan teks yang jelas, serta cukup jelas untuk hampir dapat dipahami dengan sendirinya. Perlu diingat bahwa tidak semua pengguna memiliki kemampuan kognitif yang sama. Jika tabel "membuat poin", atau memerlukan interpretasi, berikan ringkasan singkat tentang poin atau fungsi utama tabel. Tempat ringkasan tersebut ditempatkan bergantung pada panjang dan kompleksitasnya. Jika singkat, gunakan sebagai teks dalam teks. Jika lebih panjang, ringkas dalam teks, dan berikan ringkasan dalam paragraf sebelum tabel, yang mengaitkan keduanya dengan atribut aria-describedby. Menempatkan tabel di <figure> dan menempatkan ringkasan di <figcaption> adalah opsi lainnya.

Pembagian data

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

Elemen ini tidak membantu atau menghalangi aksesibilitas tabel, tetapi berguna dalam hal kegunaan. Mereka menyediakan hook gaya. Misalnya, konten header dapat dibuat tetap, sementara konten <tbody> dapat dibuat agar dapat di-scroll. Baris yang tidak disarangkan dalam salah satu dari tiga elemen penampung ini secara implisit disertakan dalam <tbody>. Ketiganya memiliki peran implisit yang sama, yaitu rowgroup. Ketiga elemen ini tidak memiliki atribut khusus elemen.

Yang telah kita miliki sejauh ini:

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

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

Konten tabel

Tabel dapat dibagi menjadi header, isi, dan footer tabel, tetapi semua ini tidak akan berfungsi jika tabel tidak berisi baris, sel, dan konten tabel. 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 rata tengah dan tebal. Gaya default ini, dan semua gaya, paling baik dikontrol dengan CSS, bukan atribut yang sudah tidak digunakan lagi yang dulu tersedia di setiap sel, 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 antara batas sel yang berdekatan, harus ditetapkan dengan properti CSS border-collapse dan border-spacing masing-masing. Border-spacing tidak akan berpengaruh jika border-collapse: collapse disetel. Jika border-collapse: separate; disetel, sel kosong dapat disembunyikan sepenuhnya dengan empty-cells: hide;. Untuk mempelajari lebih lanjut cara menata tabel, berikut adalah presentasi slide interaktif tentang gaya CSS terkait tabel.

Dalam contoh, kami telah menambahkan batas pada tabel dan setiap sel dengan CSS untuk membuat beberapa fitur lebih terlihat:

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

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

Menggabungkan sel

Mirip dengan MS Excel, Google Spreadsheet, dan Numbers, Anda dapat menggabungkan beberapa sel menjadi satu sel. Hal ini dapat dilakukan dengan atribut HTML colspan dan rowspan:

• colspan menggabungkan dua sel atau lebih yang berdekatan dalam satu baris.
• rowspan menggabungkan sel di seluruh baris saat ditambahkan ke sel di baris gabungan pertama Anda.

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 menggabungkan dua sel yang berdekatan. Sel pertama dan terakhir menyertakan rowspan="2". Tindakan ini akan menggabungkan sel dengan sel di baris yang berdekatan, tepat di bawahnya.

Baris kedua di header tabel berisi dua sel; ini 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 pada baris pertama mencakup dua baris.

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

Atribut headers mungkin tidak diperlukan dalam kasus ini, tetapi penting untuk diingat seiring dengan bertambahnya kompleksitas tabel Anda. Tabel dengan struktur yang kompleks, seperti tabel yang header atau selnya digabungkan atau dengan lebih dari dua tingkat header kolom atau baris, memerlukan identifikasi eksplisit sel header terkait. Dalam tabel yang kompleks seperti itu, kaitkan setiap sel data secara eksplisit 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>.

Namun, struktur tabel yang rumit dapat 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 mencakup beberapa kolom, bahkan tanpa menambahkan cakupan dan header, lebih mudah dipahami. Selain itu, pengelolaannya juga lebih mudah.

Gaya tabel

Ada dua elemen yang relatif tidak jelas yang disebutkan secara singkat: elemen grup kolom, <colgroup>, 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 bertingkat di <table>, tepat setelah <caption> dan sebelum data tabel. Jika rentangnya lebih dari satu kolom, gunakan atribut span.

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

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

<colgroup> dan <col> tidak memiliki makna semantik, yang akan memengaruhi aksesibilitas tabel. Namun, kolom tersebut membantu Anda menata gaya kolom dengan CSS, seperti menetapkan lebar.

Gaya terkait <td> dan <th> menggantikan gaya <col>. Di CodePen, kita menetapkan colspan untuk menggabungkan beberapa baris tabel, tetapi tidak semuanya. Jika selektor CSS nth-child diterapkan ke <tr>, bergantung pada baris atau kolom yang digabungkan, hal ini dapat memengaruhi gaya.

Sayangnya, hanya beberapa properti yang didukung. Gaya tidak diwarisi ke dalam sel, dan satu-satunya cara untuk menargetkan sel dengan <col> adalah dengan menggunakan pemilih kompleks, seperti pemilih relasional :has().

Jika <table> dan <colgroup> memiliki warna latar belakang, background-color <colgroup> berada di atas. Urutan gambar adalah: tabel, grup kolom, kolom, grup baris, 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 gaya elemen tersebut.

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

Tabel tidak responsif secara default. Sebaliknya, ukuran kartu ditetapkan sesuai dengan kontennya secara default. Diperlukan langkah-langkah tambahan agar gaya tata letak tabel dapat berfungsi secara efektif di berbagai perangkat. Jika Anda mengubah properti tampilan CSS untuk elemen tabel, sertakan atribut ARIA role. Meskipun mungkin terdengar berlebihan, properti CSS display dapat memengaruhi pohon aksesibilitas di beberapa browser.

Menyajikan data

Elemen tabel memiliki makna semantik yang digunakan oleh teknologi pendukung untuk membantu pengguna menavigasi 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 letak 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 dalam rapat, gunakan <table>. Jika ingin menggunakan fitur yang tersedia di software presentasi, seperti Google Slide atau PowerPoint, Anda mungkin memerlukan daftar deskripsi.

Singkatnya: jika Anda tidak menyajikan 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 diperlukan. Anda perlu mengetahui formulir HTML.

Uji pemahaman Anda

Uji pengetahuan Anda tentang tabel.