CSS: tavole pitagoriche con i contatori

Vi ricordate le tavole pitagoriche che si dovevano imparare a memoria a scuola? Bene, in questo esempio mostrerò come realizzarle utilizzando i contatori del contenuto generato. Una particolarità dei contatori è che oltre ad un identificativo accettano anche un numero che spefica il fattore di incremento. Quindi se specifico per il contatore two il numero 2, questo verrà ogni volta incrementato di due unità e avremo 2, 4, 6, 8 e così via. Vediamo l'esempio.

Abbiamo una tabella con dieci righe, ciascuna contenente dieci celle. Ciascun elemento tr ha un ID progressivo per facilitare la selezione degli elementi. Ecco il codice CSS che genera i numeri:

/* Contatori */

tr#one {
counter-reset: one;
}

tr#one>td:before {
counter-increment: one;
content: counter(one);
}

tr#two {
counter-reset: two;
}

tr#two>td:before {
counter-increment: two 2;
content: counter(two);
}

tr#three {counter-reset: three;}
tr#three>td:before {
counter-increment: three 3;
content: counter(three);
}

tr#four {counter-reset: four;}
tr#four>td:before {
counter-increment: four 4;
content: counter(four);
}


tr#five {counter-reset: five;}
tr#five>td:before {
counter-increment: five 5;
content: counter(five);
}


tr#six {counter-reset: six;}
tr#six>td:before {
counter-increment: six 6;
content: counter(six);
}


tr#seven {counter-reset: seven;}
tr#seven>td:before {
counter-increment: seven 7;
content: counter(seven);
}


tr#eight {counter-reset: eight;}
tr#eight>td:before {
counter-increment: eight 8;
content: counter(eight);
}


tr#nine {counter-reset: nine;}
tr#nine>td:before {
counter-increment: nine 9;
content: counter(nine);
}


tr#ten {counter-reset: ten;}
tr#ten>td:before {
counter-increment: ten 10;
content: counter(ten);
}

Come abbiamo detto in precedenza, un contatore accetta anche un numero come fattore di incremento. Su ciascuna riga viene impostato un contatore diverso con un fattore di incremento progressivo. In questo modo le celle all'interno della riga mostreranno il risultato dell'incremento di tale fattore, ossia:

nomecontatore 2 = 2 + 2 + 2 + 2 ...

Potete visionare l'esempio finale in questa pagina.