Rancang jadual HTML dengan rentangan yang saling bertaut dengan melukis keseluruhan grid terlebih dahulu, menetapkan setiap sel gabungan sebagai segi empat tepat, dan menulis sel hanya pada tempat segi empat tepat itu bermula. Panduan ini menerangkan contoh sintetik yang boleh anda hasilkan dalam TextEdit dan pratonton pada Mac anda.

Tentukan grid sebelum menulis sel

Tugasnya ialah membina satu jadual lima lajur yang mengandungi tajuk lajur berkumpulan, satu sel yang merentangi kedua-dua baris dan lajur, serta satu lagi sel yang merentangi bilangan baris yang berbeza. Label dan kandungan di bawah hanyalah ilustrasi: semuanya mewakili blok nod neutral yang disusun mengikut slot.

Jadual HTML mewakili data berbilang dimensi. Sel-selnya mesti meliputi grid jadual tanpa bertindih. Jika hasil yang anda inginkan hanyalah susun atur halaman yang terdiri daripada kotak-kotak yang tidak berkaitan, piawaian HTML mengarahkan penulis supaya menggunakan alat susun atur seperti CSS Grid. Dalam contoh ini, setiap blok mempunyai hubungan yang bermakna dengan tajuk baris dan lajurnya, maka jadual sesuai untuk tugas ini. Piawaian HTML: Elemen jadual.

Mulakan dengan menamakan lajur terkecil yang wujud di mana-mana dalam jadual. Dalam contoh ini, lajurnya ialah Slot, Nod A, Nod B, Nod C dan Nota. Tajuk Nod akan meliputi tiga daripadanya; tajuk itu tidak mewujudkan lajur tambahan.

Kedua-dua atribut rentangan mengira keseluruhan kawasan sel, termasuk kedudukan permulaannya. Oleh itu, colspan="2" meliputi dua lajur, manakala rowspan="2" meliputi dua baris. Penggunaan kedua-duanya menghasilkan segi empat tepat dua kali dua. Jika rentangan tidak dinyatakan, nilai lalainya ialah satu. MDN: Elemen Sel Data Jadual.

“Bertaut” menerangkan cara segi empat tepat ini disusun agar saling muat. Setiap sel individu tetap mempunyai kawasan berbentuk segi empat tepat; satu sel tidak boleh membengkok mengelilingi sel lain. Bayangkan anda menyusun segi empat tepat berlabel pada kertas berpetak.

Sediakan lejar slot untuk setiap baris

Gunakan jadual perancangan yang diperluas, dengan label berulang menunjukkan kawasan satu sel gabungan. Pengulangan dalam lejar ini tidak bermaksud sel itu perlu diulang dalam HTML. Bahagian pengepala akan mempunyai dua baris; isi jadual pula mempunyai empat baris.

Baris dirancang Lajur 1 Lajur 2 Lajur 3 Lajur 4 Lajur 5
Pengepala 1 Slot Nod Nod Nod Nota
Pengepala 2 Slot Nod A Nod B Nod C Nota
Isi 1 Slot 1 Blok P Blok P Blok Q Nota X
Isi 2 Slot 2 Blok P Blok P Blok R Nota X
Isi 3 Slot 3 Blok S Blok T Blok T Nota X
Isi 4 Slot 4 Blok U Blok U Blok U Nota Y

Sekarang catat kedudukan permulaan dan dimensi setiap segi empat tepat gabungan. Koordinat di sini bermula daripada satu dan dikira semula dalam setiap bahagian.

Sel Bermula di Baris diliputi Lajur diliputi
Tajuk Slot Baris pengepala 1, lajur 1 2 1
Tajuk Nod Baris pengepala 1, lajur 2 1 3
Tajuk Nota Baris pengepala 1, lajur 5 2 1
Blok P Baris isi 1, lajur 2 2 2
Nota X Baris isi 1, lajur 5 3 1
Blok T Baris isi 3, lajur 3 1 2
Blok U Baris isi 4, lajur 2 1 3

Lejar ini menjadikan baris isi kedua yang rumit lebih mudah difahami: Blok P sudah memenuhi lajur 2 dan 3, manakala Nota X sudah memenuhi lajur 5. Hanya Slot 2 dan Blok R bermula di situ, jadi baris itu hanya memerlukan dua elemen sel.

Gunakan prosedur ini untuk setiap baris:

  1. Tandakan kedudukan yang diduduki oleh rentangan yang bermula pada baris terdahulu.
  2. Cari lajur pertama yang belum diduduki.
  3. Letakkan sel seterusnya dan tandakan seluruh segi empat tepatnya, termasuk baris seterusnya.
  4. Tolak segi empat tepat jika mana-mana bahagiannya bertindih dengan kedudukan yang sudah diduduki.
  5. Teruskan sehingga kesemua lima kedudukan lajur diambil kira.

Prosedur ini ialah alat bantu perancangan yang berasaskan model jadual dalam piawaian. Pelayar melangkaui slot permulaan yang sudah diduduki semasa meletakkan sel, tetapi penulis tetap perlu mengelakkan segi empat tepat daripada bertindih. Oleh itu, mengira bilangan elemen sel dalam satu baris tidak mencukupi. Piawaian HTML: Model pemprosesan.

Pemeriksaan baris yang berguna ialah: lajur yang terus diduduki daripada baris terdahulu + lajur yang diliputi oleh sel yang baru bermula = lima. Baris isi 2 mempunyai tiga kedudukan yang terus diduduki dan dua kedudukan baharu. Baris isi 3 mempunyai satu kedudukan yang terus diduduki dan empat kedudukan baharu. Periksa juga kedudukan sebenar, bukan jumlahnya sahaja: jumlah yang sepadan tidak dapat mengesan pertindihan yang disertai ruang kosong.

Rancang kumpulan baris dan hubungan pengepala

Letakkan kedua-dua baris pengepala dalam satu thead dan keempat-empat baris isi dalam satu tbody. Sel tidak boleh merentangi kumpulan baris yang berasingan. Contohnya, Blok P tidak boleh bermula dalam satu tbody dan berakhir dalam yang lain. Piawaian turut menetapkan susunan anak jadual: caption pilihan, kumpulan lajur, thead pilihan, baris isi dan tfoot pilihan. Piawaian HTML: Jadual.

Contoh ini mentakrifkan tiga kumpulan lajur: satu lajur untuk Slot, tiga untuk Nod dan satu untuk Nota. Tajuk Nod menggunakan scope="colgroup"; tajuk bawahannya menggunakan scope="col". Panduan W3C tentang pengepala tidak sekata menggabungkan tajuk berkumpulan dengan struktur kumpulan lajur yang dinyatakan secara jelas. Jadual dengan Pengepala Tidak Sekata.

Geometri dan makna memerlukan keputusan yang berasingan. Blok P meliputi dua baris slot dan dua lajur nod, jadi pengepala yang dimaksudkan ialah Slot 1, Slot 2, Nod, Nod A dan Nod B. Nota X berkaitan dengan tiga baris slot dan lajur Nota.

Bagi sel data gabungan ini, contoh tersebut menyatakan perkaitan dengan jelas menggunakan nilai id pada sel pengepala dan rujukan yang dipisahkan dengan ruang dalam atribut headers bagi setiap sel data. W3C mendokumentasikan pendekatan ini untuk jadual kompleks yang memerlukan pengenalpastian hubungan pengepala secara jelas. Jadual dengan Pengepala Berbilang Peringkat.

Jangan gabungkan nilai yang tidak berkaitan hanya kerana teksnya sama. Dalam dokumen sintetik ini, Blok P sengaja menerangkan satu blok yang merentangi empat kedudukan. Jika setiap kedudukan sebaliknya mengandungi cerapan yang berasingan, kekalkan sel individu itu supaya jadual terus menunjukkan perbezaan tersebut.

Cipta fail HTML lengkap pada Mac anda

TextEdit boleh digunakan untuk mencipta dokumen HTML setempat. Pilih File > New, kemudian Format > Make Plain Text. Tampal dokumen lengkap di bawah, pilih File > Save dan namakannya span-plan.html. Jika diminta tentang sambungan fail, pilih Use .html. Inilah langkah penciptaan HTML yang didokumenkan oleh Apple. Bekerja dengan dokumen HTML dalam TextEdit pada Mac.

Ini ialah dokumen kendiri yang lengkap, termasuk kandungan contoh dan penggayaannya. Dokumen ini tidak memerlukan skrip atau aset luaran.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interlocking span plan</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: 1rem; }
th, td { border: 1px solid #555; padding: 0.75rem; text-align: left; }
thead { background: #eee; }
</style>
</head>
<body>
<table>
  <caption>Synthetic node blocks by slot</caption>
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="1"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col" id="slot">Slot</th>
      <th colspan="3" scope="colgroup" id="nodes">Nodes</th>
      <th rowspan="2" scope="col" id="note">Note</th>
    </tr>
    <tr>
      <th scope="col" id="a">Node A</th>
      <th scope="col" id="b">Node B</th>
      <th scope="col" id="c">Node C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="s1">Slot 1</th>
      <td rowspan="2" colspan="2" headers="s1 s2 nodes a b">Block P</td>
      <td headers="s1 nodes c">Block Q</td>
      <td rowspan="3" headers="s1 s2 s3 note">Note X</td>
    </tr>
    <tr>
      <th scope="row" id="s2">Slot 2</th>
      <td headers="s2 nodes c">Block R</td>
    </tr>
    <tr>
      <th scope="row" id="s3">Slot 3</th>
      <td headers="s3 nodes a">Block S</td>
      <td colspan="2" headers="s3 nodes b c">Block T</td>
    </tr>
    <tr>
      <th scope="row" id="s4">Slot 4</th>
      <td colspan="3" headers="s4 nodes a b c">Block U</td>
      <td headers="s4 note">Note Y</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Buka fail yang disimpan dalam pelayar pada Mac anda. Bandingkannya dengan lejar: Blok P sepatutnya merentangi Slot 1 dan 2 di bawah Nod A dan B; Nota X sepatutnya merentangi Slot 1–3; Blok T sepatutnya meliputi Nod B dan C sahaja dalam Slot 3. Ketiga-tiga pemeriksaan ini membezakan corak bertaut yang dimaksudkan daripada jadual yang sekadar mempunyai garis luar berbentuk segi empat tepat.

Jika fail yang dibuka semula dalam TextEdit memaparkan kandungan berformat, pilih File > Open, pilih fail itu, klik Show Options dan pilih Ignore rich text commands. Untuk penyuntingan seterusnya, Apple turut mendokumenkan pilihan TextEdit > Settings > Open and Save, yang membolehkan anda mengaktifkan Display HTML files as HTML code instead of formatted text. Panduan HTML TextEdit daripada Apple.

Diagnosis ralat dan kemas kini perancangan tanpa kehilangan struktur

Apabila hasilnya berbeza daripada perancangan anda, periksa baris pertama yang tidak betul dan segi empat tepat yang berterusan ke baris itu. Gunakan pemeriksaan berikut sebelum mengubah jarak atau penggayaan.

Gejala Perkara yang perlu diperiksa Pembetulan untuk contoh ini
Lajur tambahan yang tidak dijangka Sel yang ditambah pada tempat yang sudah diduduki oleh rentangan terdahulu Baris isi 2 hanya mengandungi Slot 2 dan Blok R; buang sebarang sel pengisi di situ
Blok R muncul di bawah nod yang salah Lebar dan tinggi Blok P Pastikan Blok P mempunyai kedua-dua rowspan="2" dan colspan="2"
Nota X berakhir selepas Slot 2 Bilangan barisnya Tetapkan rentangannya kepada tiga baris
Peringkat pengepala tidak sejajar Baris pengepala pertama dan bilangan sel pada baris kedua Slot dan Nota merentangi dua baris; baris pengepala kedua hanya mengandungi tiga tajuk nod
Sel gabungan mempunyai pengepala yang tidak lengkap Rujukan headers miliknya Bandingkan setiap baris dan lajur yang diliputi dengan lejar

Sel kosong sesuai digunakan apabila sesuatu kedudukan mewakili nilai yang benar-benar kosong. Sel kosong tidak diperlukan bagi kedudukan yang sudah diduduki oleh sel rentangan. Dokumentasi sel MDN menerangkan bahawa sel biasa mengisi kedudukan yang tersedia dan rentangan tidak boleh bertindih. MDN: Elemen Sel Data Jadual.

Untuk contoh tetap ini, gunakan bilangan baris positif yang dinyatakan secara jelas. Nilai khas rowspan="0" bermaksud baki baris dalam kumpulan baris semasa, jadi penambahan baris boleh memanjangkan liputan sel itu. Gunakan nilai tersebut hanya apabila “hingga penghujung kumpulan ini” menggambarkan hubungan yang dimaksudkan. MDN: Tingkah laku rentangan baris.

Sebelum menyisipkan, memadamkan atau menyusun semula baris, kemas kini lejar. Jika baris baharu disisipkan antara Slot 1 dan 2 dan Blok P sepatutnya meliputinya, tingkatkan rentangan Blok P dan tambahkan tajuk baris baharu itu pada senarai headers miliknya. Pertimbangkan Nota X secara berasingan: sisipan yang sama mungkin turut mengubah liputan yang dimaksudkan. Penyusunan semula baris memerlukan semakan yang sama kerana rentangan mengikut kedudukan dalam dokumen.

Jika kandungan itu tidak lagi membentuk segi empat tepat yang mudah difahami, ringkaskan penyampaiannya. W3C mengesyorkan supaya mempertimbangkan jadual yang lebih kecil apabila berbilang peringkat pengepala menjadikan satu jadual sukar difahami. Jadual dengan Pengepala Berbilang Peringkat.

Kekalkan lejar slot di sebelah kod sumber semasa anda menyemak dokumen. Bagi setiap perubahan, tentukan segi empat tepat yang dimaksudkan, tulis sel hanya pada kedudukan permulaannya dan periksa tajuk yang berkaitan. Cara ini memberi anda kaedah yang boleh diulang untuk mengekalkan bentuk jadual serta hubungan yang dinyatakan oleh kandungannya.

Sumber