Per associare i valori HTML a un’intestazione che copre più righe, definisci un gruppo di righe e usa scope="rowgroup". Per relazioni più complesse, assegna ID univoci alle intestazioni ed elencali nell’attributo headers di ogni cella di dati. Questa guida crea un esempio locale in TextEdit su Mac.

L’obiettivo è creare una tabella HTML i cui valori mantengano il proprio contesto quando un’etichetta si estende su più righe. W3C documenta le intestazioni raggruppate nel tutorial sulle tabelle irregolari e le associazioni esplicite nel tutorial sulle intestazioni multilivello.

Di quale associazione ha bisogno la tua tabella?

Per prima cosa, annota le etichette necessarie per comprendere un valore. Nell’esempio sintetico seguente, il valore 40 indica la larghezza, in millimetri, della variante Large del gruppo Alpha. Il contesto completo è quindi Alpha, Large e Width. Tutte le dimensioni sono dati di esempio puramente illustrativi.

Usa questa guida decisionale prima di modificare la tabella:

Struttura della tabella Associazione da usare Requisito strutturale
Un’intestazione etichetta una normale riga scope="row" Inserisci l’intestazione in una cella th di quella riga
Un’intestazione etichetta una normale colonna scope="col" Inserisci l’intestazione in una cella th di quella colonna
Un’intestazione etichetta un intero gruppo di righe del corpo scope="rowgroup" Racchiudi quelle righe in un proprio tbody
Un valore richiede più intestazioni o le relazioni cambiano all’interno della tabella ID univoci per le intestazioni e un elenco headers Identifica esplicitamente ogni intestazione pertinente

I valori di scope descrivono la relazione; rowspan indica quante righe occupa la cella. Anche un’intestazione alta ha bisogno dell’associazione appropriata. MDN documenta separatamente entrambi gli attributi nel riferimento all’elemento intestazione di tabella.

Per un gruppo regolare, lo schema W3C combina un’intestazione estesa con un tbody e un scope="rowgroup" separati. Una tabella può contenere più gruppi nel corpo. Mantieni le righe di intestazione in thead; un’intestazione estesa nel piè di pagina appartiene a tfoot. W3C: tabelle con intestazioni irregolari.

Per le tabelle complesse, le associazioni esplicite consentono di indicare direttamente il significato completo di un valore. W3C consiglia questo approccio per schemi che includono intestazioni di colonna variabili e celle associate a tre o più intestazioni. L’esempio completo usa elenchi espliciti insieme agli attributi scope strutturali, così che ciascun valore numerico indichi le proprie tre intestazioni. W3C: tabelle con intestazioni multilivello.

Crea il documento HTML in TextEdit

Per l’esercizio, usa un nuovo file locale. Se stai adattando un documento esistente, conserva prima una copia separata, così potrai confrontare i valori e l’ordine originali con le modifiche.

  1. Apri TextEdit e scegli File > Nuovo.
  2. Scegli Formato > Converti in testo semplice.
  3. Incolla il documento completo riportato sotto, escludendo i marcatori Markdown del blocco.
  4. Scegli File > Salva e chiamalo table-headers.html.
  5. Se ti viene chiesto come gestire l’estensione, scegli Usa .html.

Questi sono i passaggi documentati da Apple per creare un file HTML in TextEdit. L’esempio non richiede pacchetti, script o risorse esterne.

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

Per visualizzare l’anteprima, apri il file salvato in Safari. Dovresti vedere quattro colonne, con Alpha e Beta che occupano ciascuno due righe del corpo. Tieni il file aperto in TextEdit per i controlli sul codice sorgente riportati sotto.

Quando riapri il documento in TextEdit, usa File > Apri, seleziona il file, fai clic su Mostra opzioni e seleziona Ignora i comandi RTF. In alternativa, attiva Visualizza i file HTML come codice HTML anziché come testo formattato in TextEdit > Impostazioni, quindi in Apri e salva. Apple documenta queste opzioni nelle istruzioni per la modifica di HTML.

In che modo l’esempio collega ogni valore alle sue intestazioni?

Considera il codice sorgente del valore 40 come una piccola mappa delle associazioni. Il suo elenco headers contiene tiles-alpha, tiles-alpha-large e tiles-width. Questi ID identificano rispettivamente Alpha, Large e Width. Il valore dell’altezza corrispondente, 60, mantiene i primi due ID e sostituisce il terzo con tiles-height.

Gli ID sono identificatori scelti da chi scrive il documento, non parole chiave speciali di HTML. Ogni elemento elencato deve identificare un elemento th nella stessa tabella. Separa i token con spazi e non ripeterli in uno stesso elenco. Questi requisiti sono riportati negli attributi comuni delle celle di tabella definiti dallo standard HTML.

L’elenco specifica il contesto completo, senza aspettarsi che chi legge lo ricostruisca tramite un’altra intestazione. La tecnica H43 di W3C descrive come inserire gli ID delle intestazioni pertinenti nell’attributo headers di ogni cella di dati.

Nota che la seconda riga di Alpha inizia con Large. Non contiene una cella aggiuntiva per Alpha: la cella della prima riga occupa già quella posizione grazie a rowspan="2". Aggiungere lì una cella vuota altererebbe la griglia. MDN spiega, nelle note sull’uso delle celle di intestazione, che le celle si inseriscono nelle posizioni disponibili lasciate dalle celle estese.

Usa lo stesso ragionamento per distinguere due layout apparentemente simili. Un’etichetta sul lato sinistro che si estende su più righe del corpo può essere un’intestazione di gruppo di righe. Un’etichetta di colonna che si estende su due righe in alto può comunque essere un’intestazione di colonna con scope="col"; la sua altezza fisica non la trasforma in un’intestazione di gruppo di righe. MDN: attributi delle intestazioni.

Controlla le associazioni prima di modificare la tabella

Per questo esempio, controlla tre etichette. Scegli un valore, individua il gruppo, la variante e la dimensione a cui dovrebbe riferirsi, quindi confronta queste etichette con gli ID referenziati.

Valore Contesto previsto Valore headers previsto
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

Ripeti il controllo per ogni cella numerica. Verifica che ogni ID referenziato esista, che ogni riferimento punti all’intestazione prevista e che nessun ID sia duplicato altrove nel documento. Questi controlli seguono la procedura descritta nella tecnica H43 di W3C. Una tabella ordinata alla vista è solo una parte del controllo: verifica anche le associazioni nel codice sorgente.

Quando aggiungi una terza variante Alpha, inserisci la relativa riga nell’tbody esistente di Alpha, modifica l’estensione di Alpha in rowspan="3", assegna un ID univoco alla nuova variante e aggiungi l’elenco appropriato delle tre intestazioni a ogni nuova cella numerica. Nel farlo, mantieni l’ordine originale delle righe e i valori esistenti.

Quando rimuovi una variante, riduci di conseguenza l’estensione. Se rimuovi la prima riga di un gruppo, sposta l’intestazione del gruppo nella prima riga rimanente. Mantieni la cella estesa all’interno di un unico gruppo di righe: il modello delle tabelle HTML non consente a una cella di estendersi su più gruppi di righe. WHATWG: modello delle tabelle.

Se in seguito un’applicazione genera o riordina le righe, considera questi aspetti come requisiti da mantenere: mantieni unite le righe di ciascun gruppo, inserisci la sua intestazione estesa nella prima riga, aggiorna il conteggio delle righe e modifica gli eventuali riferimenti cambiati. In questo esempio, spostare Large prima di Small all’interno di Alpha richiederebbe anche di spostare l’intestazione Alpha nella nuova prima riga.

E se l’editor non riesce a conservare questi attributi?

La capacità di un editor di unire celle non dimostra che conservi le associazioni usate qui. Prima di fare affidamento su un documento modificato o esportato, controlla il codice HTML per verificare i confini dei gruppi, gli scope, gli ID e gli elenchi di intestazioni previsti. Il flusso di lavoro per Mac descritto in questa guida consiste nella modifica diretta del codice sorgente in TextEdit.

Se il tuo strumento di creazione non riesce a mantenere la struttura necessaria, valuta l’uso di una tabella separata e più semplice per ciascun gruppo, con le colonne Variante, Larghezza e Altezza. W3C presenta la suddivisione delle tabelle complesse in tabelle più piccole come un’alternativa che può facilitare sia la lettura sia la creazione. Usa questa opzione solo se è accettabile modificare la struttura originale. W3C: suddividere le tabelle multilivello.

Una volta completato l’esempio, scegli un numero qualsiasi e verifica che le tre etichette referenziate descrivano esattamente ciò che misura. Ripeti lo stesso controllo a ogni inserimento, eliminazione o riordino di righe. Così avrai un modo concreto per preservare sia il significato sia l’aspetto della tabella.

Fonti