Un problema piuttosto frequente, e causa di non pochi mal di testa per chi progetta pagine web, è la gestione delle tabelle con i CSS. In un precedente articolo ho già avuto modo di affronatre l’argomento relativamente alla gestione degli attributi cellspacing e cellpadding attraverso i CSS.
In questo articolo, invece, vedremo come gestire correttamente coi CSS le celle che utilizzano l’attributo colspan o rowspan. Per prima cosa, tuttavia, ricordiamo a cosa servono questi due attributi del tag <td>.
L’attributo colspan
L’attributo colspan è utilizzato per raggruppare due celle di colonne adiacenti. Si supponga di avere una tabella composta da due colonne e tre righe. Il suo aspetto normale sarebbe:
Applicando l’attributo colspan, invece, potremmo ottenere una struttura del genere:
L’attributo rowspan
L’attributo rowspan è identico al precedente con la differenza che il raggruppamento delle celle non avviene in orizzontale (per colonne) ma in verticale (per righe). Segue un esempio:
Nota: per maggiori informazioni sulle celle e sui loro attributi (tra cui colspan e rowspan) vi invito a leggere questa lezione della nostra guida HTML.
Coi CSS… arrivano i problemi
Il problema coi CSS si pone nel momento in cui per le celle viene data una definizione delle dimensioni di questo tipo:
td {
width: 200px;
height: 50px;
}Una simile stilizzazione, infatti, può creare dei seri problemi sul design della nostra tabella in quanto agirebbe anche per le celle (<td>) sulle quali sono stati applicati gli attributi colspan e rowspan. Su queste celle, tuttavia, la largheza (in caso di colspan) e l’altezza (in caso di rowspan) dovrebbero essere multiple rispetto a quelle di una cella "normale".
Come ovviare a questo inconveniente?
Spesso e volentieri mi è capitato di assistere all’utilizzo di stili in linea in questo modo:
...
<td style="width:200px;"...</td>
<td colspan="2" style="width:400px;"...</td>
...Ovviamente si tratta di una soluzione corretta ma, a mio avviso, decisamente non ottimale. Una soluzione più elegante e sofisticata, invece, potrebbe essere quella di utilizzare un selettore di attributo che vada ad agire sulle celle interessate dagli attributi in questione. Vediamo un esempio:
/* DEFINIZIONE GENERALE */
td {
width: 200px;
height: 50px;
}
/* DEFINIZIONE PER CELL CON COLSPAN=2 */
td[colspan="2"] {
width: 400px; /* raddoppio la larghezza */
height: 50px;
}
/* DEFINIZIONE PER CELL CON ROWSPAN=2 */
td[rowspan="2"] {
width: 200px;
height: 100px; /* raddoppio l'altezza */
}Così facendo, senza riempire il nostro codice HTML di inutili definizioni di stili in linea, abbiamo la possibilità di aggiustare opportunamente il nostro stile al fine di eliminare eventuali problematiche legate all’utilizzo di questi due attributi.
