CSS: trasformare una tabella in un grafico

Una tabella si presta idealmente ad essere trasformata in un grafico a barre con i CSS. Quello che dobbiamo fare è delineare il reticolato delle celle, i valori per gli assi x e y e specificare uno sfondo per le celle che si susseguono in verticale in modo da creare le barre. In questo esempio non useremo classi CSS per le righe e le celle, ma sfrutteremo alcuni selettori avanzati CSS3.

Abbiamo una tabella in cui le prime celle di ciascuna delle dieci righe riportano un numero decrescente da 10 a 1 (asse y). Viceversa, l'ultima riga della tabella riporta delle lettere dalla A alla I (asse x).

Con i CSS definiamo innanzitutto il reticolato del grafico:

#graph {
	width: 400px;
	margin: 0 auto;
}

#chart {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

#chart td {
	width: 40px;
	height: 40px;
	border: 1px solid #ccc;
}

Ora dobbiamo eliminare i bordi delle celle dell'ultima riga in modo da far comparire le voci dell'asse x al di fuori del grafico:

#chart tr:last-child td {
	border: none;
	text-align: center;
	font-weight: bold;
}

Facciamo lo stesso con l'asse y:

#chart tr > td:first-child {
	border: none;
	text-align: center;
}

Ora saliamo a ritroso di riga in riga e selezioniamo le celle adiacenti secondo l'asse verticale:

#chart tr:nth-child(10) td:nth-child(2),
#chart tr:nth-child(9) td:nth-child(2),
#chart tr:nth-child(8) td:nth-child(2) {

	background: #ccc;

}

#chart tr:nth-child(10) td:nth-child(3),
#chart tr:nth-child(9) td:nth-child(3),
#chart tr:nth-child(8) td:nth-child(3),
#chart tr:nth-child(7) td:nth-child(3) {

	background: #aaa;
	border-bottom-color: #aaa;
	border-right-color: #aaa;

}

#chart tr:nth-child(10) td:nth-child(4),
#chart tr:nth-child(9) td:nth-child(4),
#chart tr:nth-child(8) td:nth-child(4),
#chart tr:nth-child(7) td:nth-child(4),
#chart tr:nth-child(6) td:nth-child(4),
#chart tr:nth-child(5) td:nth-child(4),
#chart tr:nth-child(4) td:nth-child(4) {

	background: #888;
	border-bottom-color: #888;

}

Potete visionare l'esempio finale in questa pagina.