back to top

CSS colspan e rowspan: stilizzare correttamente le celle

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.

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Stilizzare HR (linee orizzontali) in puro CSS

Il tag <hr> (Horizontal Rule) è un elemento HTML...

Immagini riflesse con CSS

Il Flipping è una tecnica utilizzata dai grafici per...

Applicare un bordo alle lettere di un testo con CSS

Con l'avvento di CCS3 il linguaggo di stilizzazione delle...

CSS: dimensioni relative alla viewport con vw, vh, vmin e vmax

Con l'avvento e la diffusione di CSS 3 e...

Rimuovere CSS inutilizzato

Soprattutto quando si gestiscono progetti Web based di grandi...

CSS: centrare orizzontalmente un elenco puntato

Il sistema migliore per scrivere un buon menu è...
Pubblicità