Tabel

Tabel HTML digunakan untuk menampilkan data tabel dengan baris dan kolom. Keputusan untuk menggunakan <table> harus didasarkan pada konten yang Anda tampilkan dan kebutuhan pengguna terkait konten tersebut. Jika data ditampilkan, dibandingkan, diurutkan, dihitung, atau di-cross-reference, <table> mungkin merupakan pilihan yang tepat. Jika Anda hanya ingin menata konten non-tabel dengan rapi, seperti sekelompok besar gambar thumbnail, tabel tidak sesuai: sebagai gantinya, buat daftar gambar dan tata gaya petak dengan CSS.

Di bagian ini, kita akan membahas semua elemen yang membentuk tabel, beserta beberapa fitur aksesibilitas dan kegunaan yang harus Anda pertimbangkan saat menyajikan data tabel. Meskipun Pelajari HTML pada dasarnya bukan tentang CSS, dan ada seluruh kursus yang didedikasikan 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 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".

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 pada apakah <colgroup> memiliki atribut span atau tidak, <colgroup> 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 melihat baris, sel header tabel, dan sel data tabel. <colgroup> akan dibahas terakhir.

Keterangan tabel

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

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

Sebaiknya, tabel data harus memiliki header dan teks yang jelas, serta cukup sederhana sehingga hampir dapat dipahami dengan sendirinya. Perlu diingat bahwa tidak semua pengguna memiliki kemampuan kognitif yang sama. Jika tabel "menunjukkan poin", atau memerlukan interpretasi, berikan ringkasan singkat tentang poin atau fungsi utama tabel. Tempat penempatan ringkasan tersebut 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, dengan mengaitkan keduanya dengan atribut aria-describedby. Menempatkan tabel di <figure> dan menempatkan ringkasan di <figcaption> adalah opsi lainnya.

Pembagian data

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

Elemen ini tidak membantu atau menghambat aksesibilitas tabel, tetapi berguna dalam hal kegunaan. Class ini menyediakan hook gaya. Misalnya, konten header dapat dibuat melekat, sedangkan konten <tbody> dapat dibuat untuk di-scroll. Baris yang tidak disusun bertingkat di salah satu dari tiga elemen penampung ini secara implisit digabungkan dalam <tbody>. Ketiganya memiliki peran implisit yang sama, yaitu rowgroup. Tidak satu pun dari ketiga elemen ini yang memiliki atribut khusus elemen.

Yang kita 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, sehingga Anda mungkin menemukan urutan sumber yang tidak intuitif ini di codebase lama.

Konten tabel

Tabel dapat dibagi menjadi header, isi, dan footer tabel, tetapi tidak ada yang benar-benar 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 biasanya menampilkan konten di sel header tabel <th> sebagai di tengah dan tebal. Gaya default ini, dan semua gaya, sebaiknya dikontrol dengan CSS, bukan atribut yang tidak digunakan lagi yang sebelumnya tersedia di setiap sel, baris, dan bahkan <table>.

Ada atribut untuk menambahkan padding di antara sel dan dalam sel, untuk batas, dan untuk perataan teks. Cellpadding dan cellspacing, yang menentukan spasi antara konten sel dan batasnya, serta antara batas sel yang berdekatan, harus ditetapkan dengan properti border-collapse dan border-spacing CSS. Border-spacing tidak akan berpengaruh jika border-collapse: collapse ditetapkan. Jika border-collapse: separate; ditetapkan, sel kosong dapat disembunyikan sepenuhnya dengan empty-cells: hide;. Untuk mempelajari lebih lanjut cara menata gaya tabel, berikut slide presentasi 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 <th> header, sehingga membuat tiga kolom. Isi 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. Fungsi ini menentukan sel sebagai header untuk kolom atau baris sel tabel, bergantung pada nilai atribut scope yang dihitung. Browser akan ditetapkan secara default ke col atau row jika scope tidak ditetapkan secara eksplisit. Karena kita telah menggunakan markup semantik, sel 1956 memiliki dua header: Tahun dan Lou Minious. Atribusi ini memberi tahu kita bahwa "1956" adalah tahun kelulusan untuk "Lou Minious". Dalam contoh ini, karena kita dapat melihat seluruh tabel, asosiasi terlihat jelas secara visual. Penggunaan <th> memberikan pengaitan 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 sederhana seperti ini, nilai default yang dihitung akan berfungsi. Nilai lain untuk scope mencakup rowgroup dan colgroup, yang berguna dengan tabel kompleks.

Menggabungkan sel

Serupa dengan MS Excel, Google Spreadsheet, dan Numbers, Anda dapat menggabungkan beberapa sel menjadi satu sel. Hal ini dilakukan dengan HTML. Atribut colspan digunakan untuk menggabungkan dua sel atau lebih yang berdekatan dalam satu baris. Atribut rowspan digunakan untuk menggabungkan sel di seluruh baris, yang ditempatkan di 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". 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 di baris pertama mencakup dua baris.

Jika sel ditentukan oleh beberapa sel header dengan pengaitan 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, kita menentukan secara eksplisit cakupan header dengan atribut scope. Agar lebih jelas, kita menambahkan atribut headers ke setiap sel.

Atribut headers mungkin tidak diperlukan dalam kasus penggunaan yang sederhana seperti ini, tetapi atribut tersebut penting untuk dimiliki di toolbox Anda seiring dengan meningkatnya kompleksitas tabel. Tabel dengan struktur yang kompleks, seperti tabel yang menggabungkan header atau sel atau dengan lebih dari dua tingkat header kolom atau baris, memerlukan identifikasi eksplisit sel header terkait. Dalam tabel yang kompleks tersebut, 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 sering ditemukan di elemen <td>, tetapi juga valid di <th>.

Meskipun demikian, struktur tabel yang kompleks 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 diperluas, bahkan tanpa menambahkan cakupan dan header, lebih mudah dipahami. Selain itu, lebih mudah dikelola.

Menyesuaikan gaya visual tabel

Ada dua elemen yang relatif tidak jelas yang disebutkan secara singkat: elemen grup kolom, <colgroup>, dan satu-satunya turunannya, elemen kolom <col> kosong. 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 span lebih dari satu kolom, gunakan atribut span.

Urutan garis besar 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> maupun <col> tidak memiliki makna semantik dalam hal membantu membuat tabel lebih mudah diakses, tetapi keduanya memungkinkan gaya kolom terbatas, termasuk menetapkan lebar untuk kolom dengan CSS.

Gaya <col> akan menata gaya kolom selama tidak ada gaya <td> atau <th> yang mengganti gaya tersebut. Misalnya, saat <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 sepenuhnya atau akan menandai kolom ke-8 untuk beberapa baris, tetapi dengan sedikit sel kolom ke-9 dan ke-10, bergantung pada sel baris atau kolom yang digabungkan.

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

Rendering berlapis elemen yang digunakan untuk mendesain tabel HTML.

Jika <table> dan <colgroup> memiliki warna latar belakang, background-color dari <colgroup> akan 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 visualnya.

Untuk membuat garis pada 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 di isi tabel, sehingga efek latar belakang yang disetel di <colgroup> akan terlihat.

Tabel tidak responsif secara default. Sebaliknya, ukurannya disesuaikan dengan kontennya secara default. Langkah tambahan diperlukan untuk mendapatkan gaya visual tata letak tabel agar 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.

Mempresentasikan 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 letak konten dalam banyak kolom, gunakan tata letak multi-kolom. Jika Anda ingin menata letak konten dalam petak, gunakan petak CSS. Hanya gunakan tabel untuk data. Pikirkan seperti ini: jika data Anda memerlukan spreadsheet untuk dipresentasikan dalam rapat, gunakan<table>. Jika ingin menggunakan fitur yang tersedia di software presentasi seperti Keynote atau PowerPoint, Anda mungkin memerlukan daftar deskripsi.

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

Banyak developer menggunakan tabel untuk menata letak formulir, tetapi hal ini tidak perlu dilakukan. Namun, Anda perlu mengetahui formulir HTML, jadi kita akan membahasnya di bagian berikutnya.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang tabel.

Elemen mana yang digunakan untuk menandai sel yang merupakan judul?

<caption>
<th>
<header>

Informasi mana yang cenderung cocok untuk tata letak dengan tabel?

Spreadsheet informasi yang menjelaskan siswa dan nilai mereka selama 3 semester.
Bahan untuk resep.
Beberapa istilah ilmiah dan deskripsinya.