Untuk mengaitkan nilai HTML dengan pengepala yang meliputi beberapa baris, takrifkan kumpulan baris dan gunakan scope="rowgroup". Bagi hubungan yang lebih rumit, berikan ID unik kepada pengepala dan senaraikannya dalam atribut headers setiap sel data. Panduan ini membina contoh setempat dalam TextEdit pada Mac.

Tugasnya adalah untuk mencipta satu jadual HTML yang nilainya mengekalkan konteks apabila label merentangi beberapa baris. W3C menerangkan pengepala berkumpulan dalam tutorial jadual tidak sekata dan perkaitan eksplisit dalam tutorial pengepala berbilang aras.

Apakah perkaitan yang diperlukan oleh jadual anda?

Mulakan dengan menulis label yang diperlukan untuk memahami satu nilai. Dalam contoh sintetik di bawah, nilai 40 bermaksud lebar, dalam milimeter, bagi varian besar dalam set Alpha. Oleh itu, konteks lengkapnya ialah Alpha, Besar dan Lebar. Semua dimensi ialah data sampel ilustrasi.

Gunakan panduan keputusan ini sebelum mengedit:

Struktur jadual Perkaitan yang digunakan Keperluan struktur
Pengepala melabelkan satu baris biasa scope="row" Letakkan pengepala dalam sel th pada baris itu
Pengepala melabelkan satu lajur biasa scope="col" Letakkan pengepala dalam sel th pada lajur itu
Pengepala melabelkan seluruh kumpulan baris isi scope="rowgroup" Kepung baris tersebut dalam elemen tbody tersendiri
Sesuatu nilai memerlukan beberapa pengepala, atau hubungannya berubah dalam jadual ID pengepala unik dan senarai headers Kenal pasti setiap pengepala yang berkenaan secara eksplisit

Nilai scope menerangkan hubungan; rowspan menerangkan bilangan baris yang diliputi oleh sel itu. Pengepala yang tinggi tetap memerlukan perkaitan yang sesuai. MDN mendokumentasikan kedua-dua atribut secara berasingan dalam rujukan elemen pengepala jadual.

Bagi kumpulan biasa, corak W3C menggabungkan pengepala merentang dengan tbody dan scope="rowgroup" yang berasingan. Sesuatu jadual boleh mengandungi beberapa kumpulan isi. Kekalkan baris pengepala dalam thead; pengepala yang merentangi baris dalam pengaki diletakkan dalam tfoot. W3C: Jadual dengan Pengepala Tidak Sekata.

Bagi jadual yang rumit, perkaitan eksplisit membolehkan anda menyatakan keseluruhan maksud sesuatu nilai secara langsung. W3C mengesyorkan pendekatan ini untuk corak yang merangkumi pengepala lajur yang berubah dan sel yang dikaitkan dengan tiga atau lebih pengepala. Contoh lengkap menggunakan senarai eksplisit bersama atribut scope struktur supaya setiap nilai berangka menyatakan tiga pengepalanya. W3C: Jadual dengan Pengepala Berbilang Aras.

Cipta dokumen HTML dalam TextEdit

Gunakan fail setempat baharu untuk latihan ini. Jika anda menyesuaikan dokumen sedia ada, simpan salinan berasingan terlebih dahulu supaya anda boleh membandingkan nilai dan susunan asalnya dengan suntingan anda.

  1. Buka TextEdit dan pilih File > New.
  2. Pilih Format > Make Plain Text.
  3. Tampal keseluruhan dokumen di bawah, tanpa penanda pagar Markdown.
  4. Pilih File > Save dan namakannya table-headers.html.
  5. Jika diminta tentang sambungan fail, pilih Use .html.

Ini ialah langkah Apple yang didokumenkan untuk mencipta fail HTML dalam TextEdit. Contoh ini tidak memerlukan pakej, skrip atau aset luaran.

<!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 pratonton hasilnya, buka fail yang disimpan dalam Safari. Anda sepatutnya melihat empat lajur, dengan Alpha dan Beta masing-masing mengisi dua baris isi. Pastikan fail itu tersedia dalam TextEdit untuk pemeriksaan kod sumber di bawah.

Apabila membuka semula dokumen dalam TextEdit, gunakan File > Open, pilih fail, klik Show Options, kemudian pilih Ignore rich text commands. Sebagai alternatif, dayakan Display HTML files as HTML code instead of formatted text di bawah TextEdit > Settings, kemudian Open and Save. Apple mendokumentasikan pilihan ini dalam arahan penyuntingan HTML.

Bagaimanakah contoh ini mengaitkan setiap nilai dengan pengepalanya?

Baca kod sumber untuk nilai 40 sebagai peta perkaitan ringkas. Senarai headers mengandungi tiles-alpha, tiles-alpha-large dan tiles-width. ID tersebut masing-masing mengenal pasti Alpha, Besar dan Lebar. Nilai ketinggian yang sepadan, 60, mengekalkan dua ID pertama dan menggantikan yang ketiga dengan tiles-height.

ID tersebut ialah pengecam yang dipilih oleh pengarang, bukannya kata kunci HTML khas. Setiap token yang disenaraikan mesti mengenal pasti elemen th dalam jadual yang sama. Asingkan token dengan ruang dan jangan ulang token dalam satu senarai. Keperluan ini ditetapkan dalam atribut sel jadual umum dalam Piawaian HTML.

Senarai itu menyatakan konteks lengkap dan tidak mengharapkan pembaca membinanya semula melalui pengepala lain. Teknik H43 W3C menerangkan cara meletakkan ID pengepala yang berkenaan dalam atribut headers setiap sel data.

Perhatikan bahawa baris Alpha kedua bermula dengan Besar. Baris itu tidak mengandungi sel tambahan untuk Alpha: rowspan="2" pada baris pertama sudah mengisi kedudukan itu. Menambah sel kosong di situ akan mengubah grid. MDN menerangkan bahawa sel mengisi kedudukan tersedia yang ditinggalkan oleh sel merentang dalam nota penggunaan sel pengepala.

Gunakan penaakulan yang sama untuk membezakan dua susun atur yang kelihatan serupa. Label di sebelah kiri yang merentangi beberapa baris isi boleh menjadi pengepala kumpulan baris. Label lajur yang merentangi dua baris di bahagian atas masih boleh menjadi pengepala lajur dengan scope="col"; ketinggian fizikalnya tidak menjadikan hubungannya sebagai hubungan kumpulan baris. MDN: Atribut pengepala.

Semak perkaitan sebelum mengubah jadual

Lakukan audit tiga label untuk contoh ini. Pilih satu nilai, kenal pasti set, varian dan dimensinya, kemudian bandingkan label tersebut dengan ID yang dirujuk.

Nilai Konteks yang dimaksudkan Nilai headers yang dijangka
20 Alpha, Kecil, Lebar tiles-alpha tiles-alpha-small tiles-width
60 Alpha, Besar, Tinggi tiles-alpha tiles-alpha-large tiles-height
25 Beta, Kecil, Lebar tiles-beta tiles-beta-small tiles-width
65 Beta, Besar, Tinggi tiles-beta tiles-beta-large tiles-height

Ulangi semakan itu untuk setiap sel berangka. Pastikan setiap ID yang dirujuk wujud, setiap rujukan menunjuk kepada pengepala yang dimaksudkan dan tiada ID diulang di tempat lain dalam dokumen. Semakan ini mengikut prosedur dalam teknik H43 W3C. Jadual yang kelihatan kemas hanyalah sebahagian daripada semakan; periksa juga perkaitan dalam kod sumber.

Apabila menambah varian Alpha ketiga, masukkan barisnya dalam tbody Alpha sedia ada, tukar rentangan Alpha kepada rowspan="3", berikan ID unik kepada varian baharu itu dan tambahkan senarai tiga pengepala yang sesuai pada setiap sel berangka baharu. Kekalkan susunan dan nilai baris asal semasa membuat perubahan itu.

Apabila membuang varian, kurangkan rentangannya sewajarnya. Jika anda membuang baris pertama kumpulan, alihkan pengepala kumpulannya ke baris pertama yang masih ada. Kekalkan sel merentang dalam satu kumpulan baris: model jadual HTML tidak membenarkan sel merentangi beberapa kumpulan baris. WHATWG: Model jadual.

Jika baris kemudian dijana atau disusun semula oleh aplikasi, anggap perkara berikut sebagai keperluan kemas kini: kekalkan setiap kumpulan bersama-sama, letakkan pengepalanya yang merentang pada baris pertama, kekalkan kiraan rentangan dan kemas kini sebarang rujukan yang berubah. Bagi contoh ini, mengalihkan Besar ke hadapan Kecil dalam Alpha juga memerlukan pengepala Alpha dipindahkan ke baris pertama yang baharu itu.

Bagaimana jika editor tidak dapat mengekalkan atribut ini?

Keupayaan editor untuk menggabungkan sel tidak membuktikan bahawa editor itu mengekalkan perkaitan yang digunakan di sini. Sebelum bergantung pada dokumen yang diedit atau dieksport, periksa HTML-nya untuk memastikan sempadan kumpulan, scope, ID dan senarai pengepala yang dimaksudkan dikekalkan. Aliran kerja Mac yang disokong dalam tutorial ini ialah penyuntingan kod sumber secara langsung dalam TextEdit.

Jika alat pengarangan anda tidak dapat mengekalkan struktur yang diperlukan, pertimbangkan jadual berasingan yang lebih ringkas bagi setiap set, dengan lajur Varian, Lebar dan Tinggi. W3C mengemukakan pemecahan jadual kompleks kepada jadual yang lebih kecil sebagai alternatif yang boleh memudahkan pembacaan dan pengarangan. Gunakan pilihan itu hanya apabila perubahan pada struktur asal dibenarkan. W3C: Pecahkan jadual berbilang aras.

Bagi contoh yang telah siap, pilih mana-mana nombor dan sahkan bahawa tiga label yang dirujuk menerangkan dengan tepat perkara yang diukurnya. Kemudian lakukan semakan yang sama setiap kali baris ditambah, dibuang atau disusun semula. Semakan ini memberi anda cara yang jelas untuk mengekalkan makna jadual serta rupanya.

Sumber