Generating a multiplication table with CSS

We can actually generate a multiplication table using CSS generated content. We start with a basic table with ten rows and ten cells on each row:

<table summary="Multiplication table">
<caption>Multiplication table</caption>

<tr id="one">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr id="two">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr id="three">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr id="four">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr id="five">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr id="six">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr id="seven">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr id="eight">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr id="nine">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr id="ten">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

We have ten different IDs on ten rows. Now we can add a progressive numeration using CSS counters:

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);
}

As you can see, each row has its own counter (one, two, three and so on). Each counter is first reset and then incremented by a progressive factor (2, 3, 4, 5 etc.) so that each cell show the desired numerical progression. We use the :before pseudo-element to insert each number inside its own cell. You can see the final result here.