Attributo HTML colspan
L'attributo HTML colspan specifica su quante colonne si estende una cella di tabella. Scopri su quali elementi può essere utilizzato.
L'attributo HTML colspan fa sì che una singola cella di tabella si estenda su due o più colonne. È l'equivalente in markup di "unire le celle" in un foglio di calcolo: invece di avere una cella per colonna in una riga, si assegna a una cella un colspan in modo che occupi lo spazio orizzontale di più colonne. In questo modo si costruiscono righe di riepilogo, intestazioni raggruppate e qualsiasi layout in cui un contenuto appartiene a più di una colonna.
Questa pagina illustra i valori accettati da colspan, gli elementi che lo supportano, come combinarlo con rowspan per estendersi su colonne e righe contemporaneamente, le considerazioni sull'accessibilità per le celle di intestazione e il CSS moderno che sostituisce il vecchio stile con border="1".
Quali elementi supportano colspan
È possibile usare colspan solo sui due elementi cella di tabella:
<td>— una cella dati standard.colspanimposta quanti slot di colonna occupa la cella dati.<th>— una cella di intestazione.colspanimposta su quante colonne si estende l'intestazione.
Non è valido su <table>, <tr>, <col> o su qualsiasi altro elemento. Per controllare intere colonne da un unico punto, usare <col>/<colgroup> — ma il comportamento di estensione sulle celle appartiene sempre a <td> o <th>.
Regole per i valori
Il valore di colspan è un intero positivo (1, 2, 3, …):
colspan="1"è il valore predefinito — una cella normale che si estende su una singola colonna. Raramente è necessario scriverlo esplicitamente.- Qualsiasi valore maggiore di
1fa sì che la cella si estenda su quel numero di colonne. La cella consuma slot di colonna delle altre nella stessa riga, quindi ognicolspanriduce il numero di celle sorelle che quella riga dovrebbe contenere. - Lo standard HTML fissa il valore massimo a 1000; i valori maggiori vengono ridotti a tale limite.
colspan="0"era un'idea dell'HTML4 che significava "estenditi su tutte le colonne rimanenti". Non fa parte dello standard HTML living e non è supportato in modo affidabile dai browser, quindi non usarlo — specificare invece un intero positivo esplicito.
Se si imposta un colspan maggiore del numero di colonne effettivamente disponibili nella riga, il browser si estende semplicemente fino al bordo della tabella senza creare colonne extra.
Sintassi
<td colspan="value"> ... </td>
<th colspan="value"> ... </th>Esempio dell'attributo HTML colspan usato sull'elemento <td>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$150</td>
</tr>
<tr>
<td colspan="2">Total: $250</td>
</tr>
</table>
</body>
</html>L'ultima riga ha un solo <td>, non due, perché colspan="2" fa sì che quella singola cella riempia sia la colonna "Month" che quella "Salary". Se si omettesse il colspan, a quella riga mancherebbe una cella e il layout della tabella risulterebbe non corretto.
Esempio dell'attributo HTML colspan usato sull'elemento <th>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
<tr>
<td>February</td>
<td>23</td>
</tr>
</table>
</body>
</html>Combinare colspan con rowspan
colspan si estende sulle colonne (orizzontalmente); la sua controparte rowspan si estende sulle righe (verticalmente). Vengono quasi sempre trattati insieme perché le tabelle reali necessitano di entrambi — ad esempio, un'intestazione che etichetta più colonne sopra le sottointestazioni, oppure una cella etichetta che copre più righe lungo il lato.
È possibile inserire entrambi gli attributi sulla stessa cella per farla estendere su un blocco rettangolare di colonne e righe contemporaneamente. Come nel caso del solo colspan, ogni cella che un'altra cella "copre" deve essere rimossa dal markup della riga in cui sarebbe apparsa — altrimenti quella riga finisce per avere troppe celle.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Email</th>
</tr>
<tr>
<td>Anna</td>
<td>555-0101</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>Qui rowspan="2" fa sì che l'intestazione "Name" si estenda nella seconda riga di intestazione, mentre colspan="2" consente all'intestazione "Contact" di posizionarsi sopra sia "Phone" che "Email". Puoi saperne di più sulla costruzione di queste strutture nella pagina Tabelle HTML.
Stile dei bordi delle tabelle con CSS
L'attributo border="1" usato negli esempi precedenti è il vecchio modo per disegnare i bordi delle celle. È deprecato nell'HTML moderno — usare invece CSS. La proprietà chiave è border-collapse: collapse, che unisce i bordi doppi delle celle in singole linee condivise:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #666;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
</table>
</body>
</html>Questo offre il pieno controllo su colore, larghezza e spaziatura del bordo, cosa che l'attributo border non può fare.
Accessibilità per le celle di intestazione estese
Quando un <th> si estende su più colonne, i lettori di schermo hanno bisogno di aiuto per capire quali celle di dati descrive. Aggiungere uno dei seguenti elementi:
- L'attributo
scopesull'intestazione —scope="colgroup"per un'intestazione che si estende su più colonne, oscope="col"per una singola colonna. È l'opzione più semplice per tabelle dirette. - Per tabelle complesse, assegnare a ogni intestazione un
ide fare riferimento a quegli id dalle celle di dati pertinenti tramite l'attributoheaders(headers="h1 h2").
Ad esempio, un'intestazione di gruppo di colonne dovrebbe essere contrassegnata come <th colspan="2" scope="colgroup">Contact</th> in modo che la tecnologia assistiva la associ a entrambe le colonne che copre.