Om du vill koppla HTML-värden till en rubrik som omfattar flera rader definierar du en radgrupp och använder scope="rowgroup". För mer komplexa relationer ger du rubrikerna unika ID:n och listar dem i varje datacells headers-attribut. Den här guiden skapar ett lokalt exempel i Textredigerare på Mac.

Uppgiften är att skapa en HTML-tabell där värdena behåller sin kontext när en etikett sträcker sig över flera rader. W3C beskriver grupperade rubriker i sin handledning om oregelbundna tabeller och uttryckliga kopplingar i sin handledning om rubriker på flera nivåer.

Vilken koppling behöver tabellen?

Börja med att skriva ner vilka etiketter som behövs för att förstå ett värde. I det syntetiska exemplet nedan betyder värdet 40 bredden, i millimeter, för den stora varianten i uppsättning Alpha. Den fullständiga kontexten är alltså Alpha, Large och Width. Alla mått är illustrativa exempeldata.

Använd detta beslutsstöd innan du redigerar:

Tabellstruktur Koppling att använda Strukturellt krav
En rubrik etiketterar en vanlig rad scope="row" Placera rubriken i en th-cell på den raden
En rubrik etiketterar en vanlig kolumn scope="col" Placera rubriken i en th-cell i den kolumnen
En rubrik etiketterar en hel grupp med kroppsrader scope="rowgroup" Omslut raderna i en egen tbody
Ett värde behöver flera rubriker, eller så ändras relationerna i tabellen Unika rubrik-ID:n och en lista med headers Ange uttryckligen varje tillämplig rubrik

Scope-värdena beskriver relationen; rowspan beskriver hur många rader cellen upptar. Även en hög rubrik behöver rätt koppling. MDN dokumenterar båda attributen separat i sin referens för tabellrubrikelementet.

För en vanlig grupp kombinerar W3C:s mönster en rubrik som sträcker sig över flera rader med ett separat tbody och scope="rowgroup". En tabell kan innehålla flera kroppgrupper. Behåll rubrikraderna i thead; en rubrik som sträcker sig över rader i sidfoten hör hemma i tfoot. W3C: Tabeller med oregelbundna rubriker.

I komplicerade tabeller kan du med uttryckliga kopplingar ange hela betydelsen av ett värde direkt. W3C rekommenderar detta tillvägagångssätt för mönster som omfattar ändrade kolumnrubriker och celler som är kopplade till tre eller fler rubriker. Det fullständiga exemplet använder uttryckliga listor tillsammans med strukturella scope-attribut så att varje numeriskt värde anger sina tre rubriker. W3C: Tabeller med rubriker på flera nivåer.

Skapa HTML-dokumentet i Textredigerare

Använd en ny lokal fil för övningen. Om du anpassar ett befintligt dokument bör du först spara en separat kopia så att du kan jämföra de ursprungliga värdena och ordningen med dina ändringar.

  1. Öppna Textredigerare och välj Arkiv > Nytt.
  2. Välj Format > Gör till oformaterad text.
  3. Klistra in hela dokumentet nedan, utan Markdown-markörerna för kodblock.
  4. Välj Arkiv > Spara och ge filen namnet table-headers.html.
  5. Om du får en fråga om filändelsen väljer du Använd .html.

Detta är Apples dokumenterade steg för att skapa en HTML-fil i Textredigerare. Exemplet kräver inga paket, skript eller externa resurser.

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

För att förhandsvisa resultatet öppnar du den sparade filen i Safari. Du bör se fyra kolumner, där Alpha och Beta vardera upptar två kroppsrader. Ha filen öppen i Textredigerare för källkontrollerna nedan.

När du öppnar dokumentet igen i Textredigerare väljer du Arkiv > Öppna, markerar filen, klickar på Visa alternativ och väljer Ignorera kommandon för RTF. Du kan också aktivera Visa HTML-filer som HTML-kod i stället för formaterad text under Textredigerare > Inställningar och sedan Öppna och spara. Apple dokumenterar dessa alternativ i sina instruktioner för HTML-redigering.

Hur kopplar exemplet varje värde till sina rubriker?

Läs källkoden för 40 som en liten kopplingskarta. Dess headers-lista innehåller tiles-alpha, tiles-alpha-large och tiles-width. Dessa ID:n identifierar Alpha, Large respektive Width. Motsvarande höjdvärde, 60, behåller de två första ID:na och ersätter det tredje med tiles-height.

ID:na är identifierare som författaren själv har valt, inte särskilda HTML-nyckelord. Varje token i listan måste identifiera ett th-element i samma tabell. Separera token med blanksteg och upprepa inte token i en och samma lista. Dessa krav anges i HTML-standardens gemensamma attribut för tabellceller.

Listan anger hela kontexten i stället för att förvänta sig att läsaren återskapar den med hjälp av en annan rubrik. W3C:s H43-teknik beskriver hur tillämpliga rubrik-ID:n anges i varje datacells headers-attribut.

Lägg märke till att den andra Alpha-raden börjar med Large. Den har ingen extra cell för Alpha: den första radens rowspan="2" upptar redan den platsen. Om du lägger till en tom cell där förändras rutnätet. MDN förklarar i sina användningsanteckningar för rubrikceller att celler placeras på de tillgängliga platser som lämnas av celler som sträcker sig över flera rader eller kolumner.

Använd samma resonemang för att skilja mellan två layouter som liknar varandra vid första anblicken. En etikett till vänster som sträcker sig över flera kroppsrader kan vara en radgruppsrubrik. En kolumnetikett som sträcker sig över två rader högst upp kan fortfarande vara en kolumnrubrik med scope="col"; dess fysiska höjd ändrar inte relationen till en radgruppsrelation. MDN: Rubrikattribut.

Kontrollera kopplingarna innan du ändrar tabellen

Gör en kontroll av de tre etiketterna i det här exemplet. Välj ett värde, identifiera dess avsedda uppsättning, variant och dimension, och jämför sedan etiketterna med de refererade ID:na.

Värde Avsedd kontext Förväntat värde för 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

Upprepa kontrollen för varje numerisk cell. Bekräfta att varje refererat ID finns, att varje referens pekar på rätt rubrik och att inget ID är dubblerat någon annanstans i dokumentet. Kontrollerna följer metoden i W3C:s H43-teknik. En visuellt prydlig tabell är bara en del av kontrollen; inspektera även kopplingarna i källkoden.

När du lägger till en tredje Alpha-variant infogar du dess rad i Alpha:s befintliga tbody, ändrar Alpha:s span till rowspan="3", ger den nya varianten ett unikt ID och lägger till en lämplig lista med tre rubriker i varje ny numerisk cell. Bevara den ursprungliga radordningen och värdena när du gör ändringen.

När du tar bort en variant minskar du span-värdet i motsvarande grad. Om du tar bort den första raden i en grupp flyttar du grupprubriken till den första återstående raden. Behåll den övergripande cellen inom en enda radgrupp: HTML-tabellmodellen tillåter inte att en cell sträcker sig över flera radgrupper. WHATWG: Tabellmodellen.

Om en applikation senare skapar om eller sorterar om raderna bör du behandla detta som krav vid uppdatering: håll varje grupp samman, placera dess övergripande rubrik på den första raden, håll antalet rader som den omfattar korrekt och uppdatera alla referenser som ändrats. I det här exemplet skulle en flytt av Large före Small inom Alpha även kräva att Alpha-rubriken flyttas till den nya första raden.

Vad gör jag om redigeraren inte kan bevara dessa attribut?

Att en redigerare kan sammanfoga celler innebär inte att den bevarar kopplingarna som används här. Innan du förlitar dig på ett redigerat eller exporterat dokument bör du granska dess HTML och kontrollera att gruppgränser, scope-värden, ID:n och rubriklistor är de avsedda. Den här handledningen stöder ett arbetsflöde på Mac där källkoden redigeras direkt i Textredigerare.

Om ditt redigeringsverktyg inte kan behålla den struktur som krävs kan du överväga en separat, enklare tabell för varje uppsättning, med kolumnerna Variant, Width och Height. W3C beskriver uppdelning av komplexa tabeller i mindre tabeller som ett alternativ som kan göra både läsning och redigering enklare. Använd bara det alternativet om det är acceptabelt att ändra den ursprungliga strukturen. W3C: Dela upp tabeller med flera nivåer.

När exemplet är klart väljer du valfritt tal och verifierar att de tre refererade etiketterna exakt beskriver vad det mäter. Gör sedan samma kontroll vid varje insättning, borttagning eller omflyttning av rader. Då har du ett konkret sätt att bevara tabellens betydelse såväl som dess utseende.

Källor