Untuk mengaitkan nilai HTML dengan header yang mencakup beberapa baris, tentukan grup baris dan gunakan scope="rowgroup". Untuk hubungan yang lebih rumit, beri header ID unik dan cantumkan ID tersebut dalam atribut headers di setiap sel data. Panduan ini membuat contoh lokal di TextEdit pada Mac.

Tugasnya adalah membuat satu tabel HTML yang nilainya tetap memiliki konteks saat sebuah label mencakup beberapa baris. W3C mendokumentasikan header berkelompok dalam tutorial tabel tidak beraturan dan pengaitan eksplisit dalam tutorial header bertingkat.

Pengaitan apa yang dibutuhkan tabel Anda?

Mulailah dengan menuliskan label yang diperlukan untuk memahami satu nilai. Dalam contoh sintetis di bawah, nilai 40 berarti lebar, dalam milimeter, dari varian besar dalam set Alpha. Jadi, konteks lengkapnya adalah Alpha, Large, dan Width. Semua dimensi merupakan data sampel ilustratif.

Gunakan panduan keputusan ini sebelum mengedit:

Struktur tabel Pengaitan yang digunakan Persyaratan struktur
Header memberi label pada satu baris biasa scope="row" Letakkan header dalam sel th pada baris tersebut
Header memberi label pada satu kolom biasa scope="col" Letakkan header dalam sel th pada kolom tersebut
Header memberi label pada seluruh grup baris isi scope="rowgroup" Bungkus baris-baris tersebut dalam elemen tbody tersendiri
Suatu nilai membutuhkan beberapa header, atau hubungannya berubah di dalam tabel ID header unik dan daftar headers Identifikasi setiap header yang berlaku secara eksplisit

Nilai scope menjelaskan hubungan; rowspan menjelaskan jumlah baris yang ditempati sel. Header yang tinggi tetap memerlukan pengaitan yang sesuai. MDN mendokumentasikan kedua atribut tersebut secara terpisah dalam referensi elemen header tabel.

Untuk grup teratur, pola W3C menggabungkan header yang membentang dengan elemen tbody dan scope="rowgroup" yang terpisah. Sebuah tabel dapat memuat beberapa grup isi. Simpan baris header di thead; header yang membentang beberapa baris di footer ditempatkan dalam tfoot. W3C: Tabel dengan Header Tidak Beraturan.

Untuk tabel rumit, pengaitan eksplisit memungkinkan Anda menyatakan langsung seluruh makna suatu nilai. W3C merekomendasikan pendekatan ini untuk pola yang mencakup header kolom yang berubah dan sel yang terkait dengan tiga header atau lebih. Contoh lengkap menggunakan daftar eksplisit bersama atribut scope struktural agar setiap nilai numerik mencantumkan ketiga headernya. W3C: Tabel dengan Header Bertingkat.

Buat dokumen HTML di TextEdit

Gunakan file lokal baru untuk latihan ini. Jika Anda menyesuaikan dokumen yang sudah ada, simpan salinan terpisah terlebih dahulu agar Anda dapat membandingkan nilai dan urutan aslinya dengan hasil edit.

  1. Buka TextEdit dan pilih File > New.
  2. Pilih Format > Make Plain Text.
  3. Tempel seluruh dokumen di bawah, tanpa penanda pagar Markdown.
  4. Pilih File > Save dan beri nama table-headers.html.
  5. Jika muncul permintaan tentang ekstensi, pilih Use .html.

Inilah langkah-langkah yang didokumentasikan Apple untuk membuat file HTML di TextEdit. Contoh ini tidak memerlukan paket, skrip, atau aset eksternal.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample tile dimensions</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #777; padding: 0.5rem; }
    caption { text-align: left; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Sample tile dimensions</h1>
  <table>
    <caption>Illustrative tile dimensions in millimetres</caption>
    <thead>
      <tr>
        <th scope="col">Set</th>
        <th scope="col">Variant</th>
        <th id="tiles-width" scope="col">Width</th>
        <th id="tiles-height" scope="col">Height</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="tiles-alpha" rowspan="2" scope="rowgroup">Alpha</th>
        <th id="tiles-alpha-small" scope="row">Small</th>
        <td headers="tiles-alpha tiles-alpha-small tiles-width">20</td>
        <td headers="tiles-alpha tiles-alpha-small tiles-height">30</td>
      </tr>
      <tr>
        <th id="tiles-alpha-large" scope="row">Large</th>
        <td headers="tiles-alpha tiles-alpha-large tiles-width">40</td>
        <td headers="tiles-alpha tiles-alpha-large tiles-height">60</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th id="tiles-beta" rowspan="2" scope="rowgroup">Beta</th>
        <th id="tiles-beta-small" scope="row">Small</th>
        <td headers="tiles-beta tiles-beta-small tiles-width">25</td>
        <td headers="tiles-beta tiles-beta-small tiles-height">35</td>
      </tr>
      <tr>
        <th id="tiles-beta-large" scope="row">Large</th>
        <td headers="tiles-beta tiles-beta-large tiles-width">45</td>
        <td headers="tiles-beta tiles-beta-large tiles-height">65</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Untuk melihat pratinjau hasilnya, buka file yang disimpan di Safari. Anda akan melihat empat kolom, dengan Alpha dan Beta masing-masing menempati dua baris isi. Biarkan file tetap terbuka di TextEdit untuk pemeriksaan sumber di bawah.

Saat membuka kembali dokumen di TextEdit, gunakan File > Open, pilih file, klik Show Options, lalu pilih Ignore rich text commands. Sebagai alternatif, aktifkan Display HTML files as HTML code instead of formatted text di TextEdit > Settings, lalu Open and Save. Apple mendokumentasikan opsi ini dalam petunjuk pengeditan HTML.

Bagaimana contoh ini mengaitkan setiap nilai dengan headernya?

Baca sumber untuk 40 sebagai peta pengaitan sederhana. Daftar headers memuat tiles-alpha, tiles-alpha-large, dan tiles-width. ID tersebut masing-masing mengidentifikasi Alpha, Large, dan Width. Nilai tinggi yang terkait, 60, mempertahankan dua ID pertama dan mengganti ID ketiga dengan tiles-height.

ID tersebut adalah pengenal yang dipilih penulis, bukan kata kunci khusus HTML. Setiap token yang dicantumkan harus mengidentifikasi elemen th dalam tabel yang sama. Pisahkan token dengan spasi dan jangan mengulang token dalam satu daftar. Persyaratan ini tercantum dalam atribut umum sel tabel di Standar HTML.

Daftar tersebut menyebutkan konteks lengkap, alih-alih mengharapkan pembaca menyimpulkannya melalui header lain. Teknik H43 W3C menjelaskan cara mencantumkan ID header yang berlaku dalam atribut headers pada setiap sel data.

Perhatikan bahwa baris Alpha kedua dimulai dengan Large. Baris itu tidak memiliki sel tambahan untuk Alpha: baris pertama sudah menempati posisi tersebut dengan rowspan="2". Menambahkan sel kosong di sana akan mengubah kisi tabel. MDN menjelaskan bahwa sel menempati posisi tersedia yang tersisa setelah memperhitungkan sel yang membentang dalam catatan penggunaan sel header.

Gunakan alasan yang sama untuk membedakan dua tata letak yang sekilas mirip. Label di sisi kiri yang membentang beberapa baris isi dapat menjadi header grup baris. Label kolom yang membentang dua baris di bagian atas tetap dapat menjadi header kolom dengan scope="col"; tinggi fisiknya tidak mengubah hubungannya menjadi hubungan grup baris. MDN: Atribut header.

Periksa pengaitan sebelum mengubah tabel

Gunakan pemeriksaan tiga label untuk contoh ini. Pilih sebuah nilai, identifikasi set, varian, dan dimensinya, lalu bandingkan label tersebut dengan ID yang dirujuk.

Nilai Konteks yang dimaksud Nilai headers yang diharapkan
20 Alpha, Small, Width tiles-alpha tiles-alpha-small tiles-width
60 Alpha, Large, Height tiles-alpha tiles-alpha-large tiles-height
25 Beta, Small, Width tiles-beta tiles-beta-small tiles-width
65 Beta, Large, Height tiles-beta tiles-beta-large tiles-height

Ulangi pemeriksaan tersebut untuk setiap sel numerik. Pastikan setiap ID yang dirujuk memang ada, setiap rujukan mengarah ke header yang dimaksud, dan tidak ada ID yang diduplikasi di bagian lain dokumen. Pemeriksaan ini mengikuti prosedur dalam teknik H43 W3C. Tabel yang tampak rapi hanyalah salah satu bagian pemeriksaan; periksa juga pengaitan dalam sumber.

Saat menambahkan varian Alpha ketiga, sisipkan barisnya di dalam tbody yang sudah ada untuk Alpha, ubah rentang Alpha menjadi rowspan="3", beri varian baru ID unik, dan tambahkan daftar tiga header yang sesuai ke setiap sel numerik baru. Pertahankan urutan baris dan nilai aslinya saat melakukan perubahan tersebut.

Saat menghapus varian, kurangi rentangnya sesuai kebutuhan. Jika Anda menghapus baris pertama suatu grup, pindahkan header grupnya ke baris pertama yang tersisa. Pertahankan sel yang membentang di dalam satu grup baris: model tabel HTML tidak mengizinkan sel membentang beberapa grup baris. WHATWG: Model tabel.

Jika baris nantinya dibuat atau diurutkan ulang oleh aplikasi, perlakukan hal-hal berikut sebagai persyaratan pembaruan: pertahankan setiap grup tetap utuh, tempatkan header yang membentang di baris pertamanya, jaga jumlah rentang, dan perbarui rujukan yang berubah. Untuk contoh ini, memindahkan Large ke sebelum Small di dalam Alpha juga mengharuskan pemindahan header Alpha ke baris pertama yang baru.

Bagaimana jika editor tidak dapat mempertahankan atribut ini?

Kemampuan editor untuk menggabungkan sel tidak membuktikan bahwa editor tersebut mempertahankan pengaitan yang digunakan di sini. Sebelum mengandalkan dokumen yang diedit atau diekspor, periksa HTML-nya untuk memastikan batas grup, scope, ID, dan daftar header sudah sesuai. Alur kerja Mac yang didukung dalam tutorial ini adalah mengedit sumber secara langsung di TextEdit.

Jika alat penulisan Anda tidak dapat mempertahankan struktur yang diperlukan, pertimbangkan untuk membuat tabel terpisah yang lebih sederhana untuk setiap set, dengan kolom Variant, Width, dan Height. W3C menyajikan pemisahan tabel rumit menjadi tabel yang lebih kecil sebagai alternatif yang dapat memudahkan pembacaan dan penulisan. Gunakan opsi tersebut hanya jika perubahan pada struktur asli dapat diterima. W3C: Pecah tabel bertingkat.

Untuk contoh yang sudah selesai, pilih angka mana pun dan pastikan bahwa ketiga label yang dirujuk benar-benar menggambarkan apa yang diukurnya. Lalu terapkan pemeriksaan yang sama setiap kali menyisipkan, menghapus, atau mengurutkan ulang baris. Pemeriksaan ini memberi Anda cara konkret untuk mempertahankan makna sekaligus tampilan tabel.

Sumber