Plan een HTML-tabel met in elkaar grijpende overspanningen door eerst het volledige raster te tekenen, elke samengevoegde cel een rechthoek toe te wijzen en cellen alleen te schrijven waar die rechthoeken beginnen. Deze handleiding leidt je door een synthetisch voorbeeld dat je in TextEdit kunt maken en op je Mac kunt bekijken.

Bepaal het raster voordat je cellen schrijft

De opdracht is om één tabel met vijf kolommen te maken met gegroepeerde kolomkoppen, een cel die zowel rijen als kolommen overspant en een andere cel die een ander aantal rijen overspant. De labels en inhoud hieronder zijn illustratief: ze staan voor neutrale blokken met knooppunten, gerangschikt per slot.

HTML-tabellen geven multidimensionale gegevens weer. Hun cellen moeten het raster van de tabel zonder overlap vullen. Als je alleen een pagina-indeling van niet-gerelateerde vakken wilt maken, verwijst de HTML-standaard auteurs naar indelingstools zoals CSS Grid. Hier heeft elk blok een betekenisvolle relatie met de rij- en kolomkoppen, dus past een tabel bij de opdracht. HTML-standaard: het table-element.

Begin met de kleinste kolommen te benoemen die ergens in de tabel voorkomen. In dit voorbeeld zijn dat Slot, Knooppunt A, Knooppunt B, Knooppunt C en Opmerking. De kop Knooppunten beslaat drie daarvan; deze maakt geen extra kolom aan.

De twee span-attributen tellen de volledige voetafdruk van de cel, inclusief de beginpositie. Zo beslaat colspan="2" twee kolommen, terwijl rowspan="2" twee rijen beslaat. Als je beide toepast, ontstaat een rechthoek van twee bij twee. Een weggelaten span heeft standaard de waarde één. MDN: Het td-element.

‘In elkaar grijpende’ beschrijft hoe deze rechthoeken in elkaar passen. Elke afzonderlijke cel heeft nog steeds een rechthoekige voetafdruk; één cel kan niet om een andere cel heen buigen. Stel je voor dat je gelabelde rechthoeken op ruitjespapier legt.

Maak voor elke rij een slotregister

Gebruik een uitgebreide planningstabel waarin herhaalde labels de voetafdruk van één samengevoegde cel aangeven. Herhaling in dit register betekent niet dat je die cel in de HTML herhaalt. De kopsectie heeft twee rijen; de hoofdsectie heeft er vier.

Geplande rij Kolom 1 Kolom 2 Kolom 3 Kolom 4 Kolom 5
Kop 1 Slot Knooppunten Knooppunten Knooppunten Opmerking
Kop 2 Slot Knooppunt A Knooppunt B Knooppunt C Opmerking
Hoofd 1 Slot 1 Blok P Blok P Blok Q Opmerking X
Hoofd 2 Slot 2 Blok P Blok P Blok R Opmerking X
Hoofd 3 Slot 3 Blok S Blok T Blok T Opmerking X
Hoofd 4 Slot 4 Blok U Blok U Blok U Opmerking Y

Noteer nu de beginpositie en afmetingen van elke samengevoegde rechthoek. De coördinaten beginnen hier bij één en worden binnen elke sectie opnieuw gestart.

Cel Begint bij Bestreken rijen Bestreken kolommen
Slotkop Koprij 1, kolom 1 2 1
Kop Knooppunten Koprij 1, kolom 2 1 3
Opmerkingkop Koprij 1, kolom 5 2 1
Blok P Hoofdrij 1, kolom 2 2 2
Opmerking X Hoofdrij 1, kolom 5 3 1
Blok T Hoofdrij 3, kolom 3 1 2
Blok U Hoofdrij 4, kolom 2 1 3

Met dit register is de lastige tweede rij van de hoofdsectie eenvoudig: Blok P bezet al de kolommen 2 en 3, en Opmerking X bezet al kolom 5. Alleen Slot 2 en Blok R beginnen daar, dus die rij heeft slechts twee celelementen nodig.

Gebruik deze procedure voor elke rij:

  1. Markeer de posities die bezet zijn door overspanningen die in eerdere rijen zijn begonnen.
  2. Zoek de eerste onbezeten kolom.
  3. Plaats de volgende cel en markeer de volledige rechthoek ervan, inclusief toekomstige rijen.
  4. Wijs een rechthoek af als enig deel ervan een bezette positie overlapt.
  5. Ga door totdat alle vijf kolomposities zijn verantwoord.

Deze procedure is een hulpmiddel bij het plannen, afgeleid van het tabelmodel in de standaard. Browsers slaan bezette startposities over bij het plaatsen van cellen, maar auteurs moeten overlap tussen rechthoeken nog steeds voorkomen. Het aantal celelementen in een rij tellen is daarom niet voldoende. HTML-standaard: verwerkingsmodel.

Een nuttige controle per rij is: doorgegeven bezette kolommen + kolommen die worden bestreken door nieuw beginnende cellen = vijf. Hoofdrij 2 heeft drie doorgegeven posities en twee nieuwe posities. Hoofdrij 3 heeft één doorgegeven positie en vier nieuwe posities. Controleer ook hun werkelijke locaties: alleen overeenkomende totalen kunnen geen overlap met een ontbrekende positie opsporen.

Plan rijgroepen en koprelaties

Houd beide koprijen binnen één thead en alle vier de rijen van de hoofdsectie binnen één tbody. Een cel kan zich niet over afzonderlijke rijgroepen uitstrekken. Blok P kan bijvoorbeeld niet in één tbody beginnen en in een andere eindigen. De standaard specificeert ook de volgorde van tabelkinderen: een optioneel caption, kolomgroepen, een optioneel thead, rijen van de hoofdsectie en een optioneel tfoot. HTML-standaard: tabellen.

Het voorbeeld definieert drie kolomgroepen: één kolom voor Slot, drie voor Knooppunten en één voor Opmerking. De kop Knooppunten gebruikt scope="colgroup"; de onderliggende koppen gebruiken scope="col". De richtlijnen van W3C voor onregelmatige koppen combineren gegroepeerde koppen met een expliciete kolomgroepstructuur. Tabellen met onregelmatige koppen.

Geometrie en betekenis vereisen afzonderlijke beslissingen. Blok P beslaat twee slotrijen en twee knooppuntkolommen, dus de bedoelde koppen zijn Slot 1, Slot 2, Knooppunten, Knooppunt A en Knooppunt B. Opmerking X hoort bij drie slotrijen en de kolom Opmerking.

Voor deze samengevoegde gegevenscellen maakt het voorbeeld de relaties expliciet met id-waarden op kopcellen en verwijzingen, gescheiden door spaties, in het headers-attribuut van elke gegevenscel. W3C beschrijft deze aanpak voor complexe tabellen waarvan de koprelaties expliciet moeten worden vastgelegd. Tabellen met koppen op meerdere niveaus.

Voeg onafhankelijke waarden niet samen alleen omdat hun tekst overeenkomt. In dit synthetische document beschrijft Blok P bewust één blok dat vier posities beslaat. Als elke positie in plaats daarvan een afzonderlijke waarneming bevat, behoud dan de afzonderlijke cellen zodat de tabel dat onderscheid bewaart.

Maak het volledige HTML-bestand op je Mac

Met TextEdit kun je het lokale HTML-document maken. Kies File > New en daarna Format > Make Plain Text. Plak het volledige document hieronder, kies File > Save en noem het span-plan.html. Kies Use .html als je een melding over de extensie krijgt. Dit zijn de door Apple gedocumenteerde stappen voor het maken van HTML. Werken met HTML-documenten in TextEdit op de Mac.

Dit is een volledig zelfstandig document met de voorbeeldinhoud en opmaak erin. Er zijn geen scripts of externe bestanden nodig.

<!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>

Open het opgeslagen bestand in een browser op je Mac. Vergelijk het met het register: Blok P moet doorlopen over Slot 1 en 2 onder Knooppunt A en B; Opmerking X moet doorlopen over Slot 1–3; Blok T moet in Slot 3 alleen Knooppunt B en C beslaan. Met die drie controles onderscheid je het bedoelde in elkaar grijpende patroon van een tabel die alleen een rechthoekige omtrek heeft.

Als het bestand bij het opnieuw openen in TextEdit opgemaakte inhoud toont, kies dan File > Open, selecteer het bestand, klik op Show Options en selecteer Ignore rich text commands. Voor latere bewerkingen documenteert Apple ook TextEdit > Settings > Open and Save, waar je Display HTML files as HTML code instead of formatted text kunt inschakelen. Apples HTML-handleiding voor TextEdit.

Spoor fouten op en werk het plan bij zonder de structuur te verliezen

Als het resultaat afwijkt van je plan, controleer dan de eerste onjuiste rij en de rechthoeken die daarin doorlopen. Gebruik de volgende controles voordat je de afstand of opmaak wijzigt.

Symptoom Wat je moet controleren Correctie voor dit voorbeeld
Er verschijnt onverwacht een extra kolom Cellen die zijn toegevoegd op plekken waar een eerdere overspanning al ruimte inneemt Hoofdrij 2 bevat alleen Slot 2 en Blok R; verwijder eventuele opvulcellen daar
Blok R verschijnt onder het verkeerde knooppunt De breedte en hoogte van Blok P Controleer of Blok P zowel rowspan="2" als colspan="2" heeft
Opmerking X eindigt na Slot 2 Het aantal rijen dat de cel beslaat Stel de overspanning in op drie rijen
De kopniveaus zijn niet uitgelijnd De eerste koprij en het aantal cellen op de tweede rij Slot en Opmerking beslaan twee rijen; de tweede koprij bevat alleen de drie knooppuntkoppen
Een samengevoegde cel heeft onvolledige koppen De headers-verwijzingen Vergelijk elke bestreken rij en kolom met het register

Een lege cel is passend wanneer een positie een daadwerkelijk lege waarde voorstelt. Zo’n cel is niet nodig op een positie die al door een overspannende cel wordt ingenomen. De celdocumentatie van MDN legt uit dat gewone cellen op beschikbare posities passen en dat overspanningen niet mogen overlappen. MDN: Het td-element.

Gebruik voor dit vaste voorbeeld expliciete positieve rijenaantallen. De speciale waarde rowspan="0" betekent de resterende rijen van de huidige rijgroep, dus als je een rij toevoegt, kan de cel verder gaan doorlopen. Gebruik die waarde alleen wanneer ‘tot het einde van deze groep’ de bedoelde relatie uitdrukt. MDN: Gedrag van rowspan.

Werk het register bij voordat je een rij invoegt, verwijdert of verplaatst. Als je een nieuwe rij invoegt tussen Slot 1 en 2 en Blok P die moet omvatten, vergroot dan de span van Blok P en voeg de nieuwe rijkop toe aan de lijst headers. Beoordeel Opmerking X afzonderlijk: door dezelfde invoeging kan ook de bedoelde dekking daarvan veranderen. Voor het verplaatsen van rijen is dezelfde controle nodig, omdat de overspanning de documentpositie volgt.

Vormt de inhoud geen begrijpelijke rechthoeken meer, vereenvoudig dan de presentatie. W3C raadt aan kleinere tabellen te overwegen wanneer meerdere kopniveaus één tabel moeilijk te begrijpen maken. Tabellen met koppen op meerdere niveaus.

Houd het slotregister naast de bron terwijl je het document bijwerkt. Bepaal bij elke wijziging de bedoelde rechthoeken, schrijf cellen alleen op hun beginposities en controleer de bijbehorende koppen. Zo heb je een herhaalbare manier om zowel de vorm van de tabel als de relaties in de inhoud te behouden.

Bronnen