Als je HTML-waarden wilt koppelen aan een kop die meerdere rijen beslaat, definieer je een rijgroep en gebruik je scope="rowgroup". Geef koppen unieke ID’s en vermeld die in het headers-attribuut van elke gegevenscel voor complexere relaties. In deze handleiding maak je een lokaal voorbeeld in Teksteditor op de Mac.

De opdracht is één HTML-tabel te maken waarvan de waarden hun context behouden wanneer een label meerdere rijen beslaat. De W3C documenteert gegroepeerde koppen in de handleiding over onregelmatige tabellen en expliciete koppelingen in de handleiding over koppen op meerdere niveaus.

Welke koppeling heeft je tabel nodig?

Noteer eerst welke labels nodig zijn om een waarde te begrijpen. In het synthetische voorbeeld hieronder betekent de waarde 40 de breedte, in millimeters, van de grote variant in set Alpha. De volledige context is dus Alpha, Large en Width. Alle afmetingen zijn illustratieve voorbeeldgegevens.

Gebruik deze besliswijzer voordat je wijzigingen aanbrengt:

Tabelstructuur Te gebruiken koppeling Structurele vereiste
Een kop labelt één gewone rij scope="row" Plaats de kop in een th-cel in die rij
Een kop labelt één gewone kolom scope="col" Plaats de kop in een th-cel in die kolom
Een kop labelt een volledige groep gegevensrijen scope="rowgroup" Omsluit die rijen in een eigen tbody
Een waarde heeft meerdere koppen nodig of relaties veranderen binnen de tabel Unieke kop-ID’s en een lijst met headers Identificeer elke toepasselijke kop expliciet

De scope-waarden beschrijven de relatie; rowspan beschrijft hoeveel rijen de cel beslaat. Ook een hoge kop heeft de juiste koppeling nodig. MDN documenteert beide attributen afzonderlijk in de referentie voor het table header-element.

Voor een gewone groep combineert het patroon van de W3C een kop die meerdere rijen beslaat met een afzonderlijke tbody en scope="rowgroup". Een tabel kan meerdere gegevensgroepen bevatten. Houd koprijen in thead; een kop die meerdere rijen beslaat in de voettekst hoort in tfoot. W3C: Tabellen met onregelmatige koppen.

Bij ingewikkelde tabellen kun je met expliciete koppelingen de volledige betekenis van een waarde rechtstreeks vastleggen. De W3C beveelt deze aanpak aan voor patronen met onder meer wisselende kolomkoppen en cellen die aan drie of meer koppen gekoppeld zijn. Het volledige voorbeeld gebruikt expliciete lijsten naast structurele scope-attributen, zodat elke numerieke waarde de drie koppen benoemt. W3C: Tabellen met koppen op meerdere niveaus.

Maak het HTML-document in Teksteditor

Gebruik voor deze oefening een nieuw lokaal bestand. Als je een bestaand document aanpast, bewaar dan eerst een aparte kopie, zodat je de oorspronkelijke waarden en volgorde met je wijzigingen kunt vergelijken.

  1. Open Teksteditor en kies Archief > Nieuw.
  2. Kies Opmaak > Maak platte tekst.
  3. Plak het volledige document hieronder, zonder de Markdown-afbakeningen.
  4. Kies Archief > Bewaar en geef het de naam table-headers.html.
  5. Kies Gebruik .html als je wordt gevraagd naar de extensie.

Dit zijn de door Apple gedocumenteerde stappen voor het maken van een HTML-bestand in Teksteditor. Voor dit voorbeeld zijn geen pakketten, scripts of externe bestanden nodig.

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

Open het opgeslagen bestand in Safari om een voorbeeld te bekijken. Je ziet vier kolommen, waarbij Alpha en Beta elk twee gegevensrijen beslaan. Houd het bestand in Teksteditor beschikbaar voor de broncontroles hieronder.

Als je het document opnieuw opent in Teksteditor, gebruik je Archief > Open, selecteer je het bestand, klik je op Toon opties en selecteer je Negeer opdrachten voor structuur. Je kunt ook Toon HTML-bestanden als HTML-code in plaats van opgemaakte tekst inschakelen via Teksteditor > Instellingen en vervolgens Open en bewaar. Apple documenteert deze opties in de instructies voor HTML-bewerking.

Hoe koppelt het voorbeeld elke waarde aan de koppen?

Bekijk de broncode voor 40 als een kleine koppelingskaart. De lijst met headers bevat tiles-alpha, tiles-alpha-large en tiles-width. Deze ID’s verwijzen respectievelijk naar Alpha, Large en Width. De bijbehorende hoogtewaarde, 60, behoudt de eerste twee ID’s en vervangt de derde door tiles-height.

De ID’s zijn door de auteur gekozen identificatiecodes, geen speciale HTML-trefwoorden. Elke vermelde token moet verwijzen naar een element th in dezelfde tabel. Scheid tokens met spaties en herhaal geen tokens binnen één lijst. Deze vereisten staan in de HTML-standaard voor algemene attributen van tabelcellen.

De lijst vermeldt de volledige context, zodat de lezer die niet via een andere kop hoeft af te leiden. De H43-techniek van de W3C beschrijft hoe je de ID’s van toepasselijke koppen in het headers-attribuut van elke gegevenscel plaatst.

Let op: de tweede Alpha-rij begint met Large. Er staat geen extra cel voor Alpha: de rowspan="2" van de eerste rij neemt die positie al in. Als je daar een lege cel toevoegt, verandert het raster. MDN legt uit dat cellen in de beschikbare posities passen die overblijven na cellen die meerdere posities beslaan, in de gebruiksnotities voor headercellen.

Gebruik dezelfde redenering om twee oppervlakkig vergelijkbare indelingen van elkaar te onderscheiden. Een label aan de linkerkant dat meerdere gegevensrijen beslaat, kan een kop voor een rijgroep zijn. Een kolomlabel dat bovenaan twee rijen beslaat, kan nog steeds een kolomkop met scope="col" zijn; de fysieke hoogte maakt de relatie er niet een voor een rijgroep van. MDN: Headerattributen.

Controleer koppelingen voordat je de tabel wijzigt

Voer voor dit voorbeeld een controle met drie labels uit. Kies een waarde, bepaal de bijbehorende set, variant en dimensie, en vergelijk die labels vervolgens met de ID’s waarnaar wordt verwezen.

Waarde Beoogde context Verwachte waarde van headers
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

Herhaal deze controle voor elke numerieke cel. Controleer of elke ID waarnaar wordt verwezen bestaat, elke verwijzing naar de bedoelde kop wijst en nergens anders in het document een ID dubbel voorkomt. Deze controles volgen de procedure in de H43-techniek van de W3C. Een visueel nette tabel is slechts één onderdeel van de controle; inspecteer ook de koppelingen in de broncode.

Als je een derde Alpha-variant toevoegt, voeg je de rij in binnen de bestaande tbody van Alpha, wijzig je de span van Alpha in rowspan="3", geef je de nieuwe variant een unieke ID en voeg je aan elke nieuwe numerieke cel de juiste lijst met drie koppen toe. Behoud daarbij de oorspronkelijke rijvolgorde en waarden.

Als je een variant verwijdert, verklein je de span dienovereenkomstig. Verplaats de kop van de groep naar de eerste overgebleven rij als je de eerste rij van een groep verwijdert. Houd de cel die meerdere rijen beslaat binnen één rijgroep: volgens het HTML-tabelmodel mag een cel zich niet over meerdere rijgroepen uitstrekken. WHATWG: Tabelmodel.

Als een toepassing rijen later genereert of opnieuw ordent, gelden dit als vereisten voor het bijwerken: houd elke groep bij elkaar, plaats de kop die meerdere rijen beslaat in de eerste rij, houd het aantal spans bij en werk gewijzigde verwijzingen bij. Als je in dit voorbeeld Large vóór Small binnen Alpha verplaatst, moet je de Alpha-kop ook naar die nieuwe eerste rij verplaatsen.

Wat als de editor deze attributen niet kan behouden?

Dat een editor cellen kan samenvoegen, bewijst niet dat de editor de hier gebruikte koppelingen behoudt. Controleer voordat je op een bewerkt of geëxporteerd document vertrouwt de HTML op de bedoelde groepsgrenzen, scopes, ID’s en koplijsten. De in deze handleiding ondersteunde Mac-workflow is rechtstreekse bewerking van de broncode in Teksteditor.

Als je auteursprogramma de vereiste structuur niet kan behouden, kun je voor elke set een aparte, eenvoudigere tabel overwegen met de kolommen Variant, Breedte en Hoogte. De W3C noemt het opsplitsen van complexe tabellen in kleinere tabellen als alternatief dat lezen en maken eenvoudiger kan maken. Gebruik die optie alleen als het aanvaardbaar is de oorspronkelijke structuur te wijzigen. W3C: Tabellen met meerdere niveaus opsplitsen.

Kies voor het voltooide voorbeeld een willekeurig getal en controleer of de drie labels waarnaar wordt verwezen precies beschrijven wat het meet. Voer dezelfde controle uit bij elke rij die je invoegt, verwijdert of verplaatst. Zo kun je de betekenis van de tabel én het uiterlijk ervan behouden.

Bronnen