Guida HTML interattiva: Colspan e rowspan

Q: Cosa fa colspan in HTML?

colspan fa estendere un o un su più colonne: prende il posto di tre celle nella sua riga. Quella riga ha quindi bisogno di due celle in meno delle altre.

Q: Cosa fa rowspan in HTML?

rowspan fa estendere una cella verso il basso su più righe: occupa la sua riga e quella sotto. La riga successiva deve saltare quella colonna, perché la cella sopra la copre già.

Q: Una cella può usare colspan e rowspan insieme?

Sì. copre un blocco di due colonne per due righe. Ogni riga che attraversa ha bisogno di due celle proprie in meno.

Q: Qual è il valore massimo di colspan?

I browser limitano colspan a 1000 e rowspan a 65534. Per colspan, un valore di 0 o che non inizia con una cifra viene trattato come 1.

colspan: una cella su più colonne

colspan="n" rende una cella larga quanto n colonne. La riga in cui si trova ha quindi n - 1 celle in meno. Qui il totale occupa le prime due colonne:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>colspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    <tr><td>Pens</td><td>2</td><td>4.00</td></tr>
    <tr><td>Paper</td><td>1</td><td>6.50</td></tr>
    <tr><td class="span" colspan="2">Total</td><td>10.50</td></tr>
  </table>
</body>
</html>

L'ultima riga ha due celle, ma la prima vale due, quindi la riga arriva comunque a tre colonne come le altre.

rowspan: una cella su più righe

rowspan="n" rende una cella alta quanto n righe. Le righe sotto saltano quella colonna, perché la cella alta la occupa già:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rowspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
  </style>
</head>
<body>
  <table>
    <tr><th>Team</th><th>Member</th></tr>
    <tr><td class="span" rowspan="3">Design</td><td>Ana</td></tr>
    <tr><td>Bob</td></tr>
    <tr><td>Cy</td></tr>
    <tr><td>Web</td><td>Dee</td></tr>
  </table>
</body>
</html>

Le righe di Bob e Cy hanno un solo <td>: la colonna Team è già occupata da "Design". Nell'HTML niente lo segnala, quindi leggi una tabella con rowspan dall'alto verso il basso e tieni il conto di quali colonne sono ancora coperte.

colspan e rowspan insieme: un orario

Una cella può estendersi in entrambe le direzioni. Un orario è il caso classico, con alcune lezioni che durano due fasce e alcune che coprono due giorni:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timetable</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; text-align: center; }
    th, td { border: 1px solid #6b7280; padding: 8px 14px; }
    thead th { background: #e5e7eb; }
    .html { background: #fde68a; }
    .css { background: #bfdbfe; }
    .lab { background: #bbf7d0; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Time</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">9:00</th><td class="html" rowspan="2">HTML</td><td class="css">CSS</td><td>Free</td></tr>
      <tr><th scope="row">10:00</th><td class="lab" colspan="2" rowspan="2">Lab</td></tr>
      <tr><th scope="row">11:00</th><td>Free</td></tr>
    </tbody>
  </table>
</body>
</html>

Conta la riga delle 10:00: l'intestazione dell'ora, poi Mon è coperto da HTML della riga sopra, poi Lab occupa Tue e Wed. Alle 11:00, Mon è di nuovo libero e Lab copre ancora Tue e Wed, quindi la riga ha una sola cella di dati.

Contare le celle perché la tabella resti regolare

Ogni riga deve arrivare allo stesso numero di colonne, contando il colspan di ogni cella e le colonne coperte dalle celle con rowspan sopra. Quando una riga ha una cella di troppo, il browser aggiunge una nuova colonna per lei e la tabella ha un bordo frastagliato:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrong count</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
    .extra { background: #fee2e2; }
  </style>
</head>
<body>
  <table>
    <caption>Wrong</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td><td class="extra">D</td></tr>
  </table>
  <table>
    <caption>Right</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td></tr>
  </table>
</body>
</html>

Nella tabella sbagliata, la seconda riga ha dimenticato che A copre la sua prima colonna, quindi D finisce in una terza colonna che nessun'altra riga ha. La soluzione è eliminare una cella. Lo stesso errore con colspan è tenere tutte le celle originali nella riga che ha la cella larga.

Una cella in meno è il problema opposto: la riga finisce prima e lascia un buco alla fine.

Intestazioni raggruppate con colspan

Un'intestazione può estendersi sulle colonne che descrive, sopra una riga di intestazioni più specifiche. Segnala con scope="colgroup" così i lettori di schermo la applicano a tutte le colonne sotto di lei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grouped headers</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; text-align: center; }
    thead th { background: #e5e7eb; }
  </style>
</head>
<body>
  <table>
    <colgroup><col></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2" scope="col">City</th>
        <th colspan="2" scope="colgroup">January</th>
        <th colspan="2" scope="colgroup">July</th>
      </tr>
      <tr>
        <th scope="col">Low</th><th scope="col">High</th>
        <th scope="col">Low</th><th scope="col">High</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Oslo</th><td>-7</td><td>-1</td><td>13</td><td>22</td></tr>
      <tr><th scope="row">Rome</th><td>3</td><td>12</td><td>19</td><td>31</td></tr>
    </tbody>
  </table>
</body>
</html>

"City" occupa entrambe le righe di intestazione con rowspan="2", e ogni mese occupa le sue due colonne con colspan="2". Gli elementi <colgroup> definiscono i gruppi di colonne a cui si riferisce scope="colgroup". Un lettore di schermo sulla cella 31 di Rome può quindi dire "Rome, July, High, 31". Per il resto della struttura della tabella, vedi tabelle in HTML.

Usa le unioni solo per una struttura reale

Le celle unite rendono una tabella più difficile da leggere con un lettore di schermo e più difficile da ordinare, filtrare o copiare in un foglio di calcolo. Usale dove i dati sono davvero raggruppati (un totale, un'intestazione sopra delle sottocolonne, una lezione che dura due ore). Se una tabella ha bisogno di molte unioni, due tabelle più semplici sono spesso più chiare.

Errori comuni

Lasciare le celle coperte. Una cella colspan="2" sostituisce due celle; elimina una delle originali.
Dimenticare le righe sotto un rowspan. Ognuna ha bisogno di una cella in meno.
Scrivere colspan su <tr>. Funziona solo su <td> e <th>.
Unioni per l'impaginazione visiva, come una riga banner in una tabella usata per impaginare la pagina. Per l'impaginazione usa CSS grid.
colspan="100%" per dire "tutta la larghezza". Il browser legge solo le cifre iniziali, quindi questa cella occupa 100 colonne e aggiunge colonne vuote alla tabella. Il valore è un numero intero di colonne.

Domande frequenti

Cosa fa colspan in HTML?

colspan fa estendere un <td> o un <th> su più colonne: <td colspan="3"> prende il posto di tre celle nella sua riga. Quella riga ha quindi bisogno di due celle in meno delle altre.

Cosa fa rowspan in HTML?

rowspan fa estendere una cella verso il basso su più righe: <td rowspan="2"> occupa la sua riga e quella sotto. La riga successiva deve saltare quella colonna, perché la cella sopra la copre già.

Una cella può usare colspan e rowspan insieme?

Sì. <td colspan="2" rowspan="2"> copre un blocco di due colonne per due righe. Ogni riga che attraversa ha bisogno di due celle proprie in meno.

Perché nella mia tabella sporge una cella in più?

Una riga ha più celle delle altre, una volta contate le unioni. Di solito una riga sotto un rowspan elenca ancora una cella per la colonna coperta, oppure una riga con un colspan ha tenuto tutte le celle originali. Togli il <td> in più.

Qual è il valore massimo di colspan?

I browser limitano colspan a 1000 e rowspan a 65534. Per colspan, un valore di 0 o che non inizia con una cifra viene trattato come 1.

Concetti correlati