Although we’ve added a <tfoot>before the <tbody>, it still appears at the end.

It comes from the fact that the <tbody> can contain a lot of rows. But the browser wants to render the foot before receiving all of the (potentially numerous) rows of data. That’s why the <tfoot> is first in the code.

colspan and rowspan

You can merge columns or rows by using the rowspan and colspan respectively.

Keep in mind that in order to merge columns you need to use the rowspan attribute, as it allows to span a column across several rows.

<table><tr><thcolspan="2">Michael Jackson Singles</th></tr><tr><throwspan="3">1979</th><td>Don't Stop 'Til You Get Enough</td></tr><tr><td>Rock with You</td></tr><tr><td>Off the Wall</td></tr></table>

Michael Jackson Singles

1979

Don't Stop 'Til You Get Enough

Rock with You

Off the Wall

The “Michael Jackson Singles” cell spans across 2 columns, so the following row includes two cells.

Because the cell “1979” spans across 3 rows, the 2 following rows only include a one cell, to allow space for the “1979” column.

It can be hard to keep track of how many cells are either missing or superfluous. One easy way to build a complete 2 by 4 table first, and then remove cells while adding colspan and rowspan attributes.
In our case, we are supposed to have 8 cells. We only write 5 cells, but the colspan="2" and rowspan="3" add 3 additional cells.