Lesson 11

HTML Tables


HTML tables are meant for tabular data only, which is any type of content that can be semantically arranged in rows and columns.

It’s like having a spreadsheet in Excel.


Building a table in HTML requires a specific structure:

  • open a <table>

  • add rows with <tr>

  • add regular cells with <td> or heading cells with <th>

This hierarchy is required, and all 3 elements are necessary to build a table.

When writing the code, you need to define your table cells from left to right, and then from to bottom.

John LennonRhythm Guitar
Paul McCartneyBass
George HarrisonLead Guitar
Ringo StarrDrums

As you can see, a table in HTML is relatively verbose: there are a lot of tags for just a few rows of data.

thead, tfoot and tbody

Just like a webpage can have a header and a footer, a table can have a head, a body, and a foot. As anything in HTML, this is purely for semantic reasons: providing more structure to your table.

<thead>, <tfoot> and <tbody> are collections of rows. As such, they are direct children of <table> and direct parents of one or more <tr>. In short, they add one level of hierarchy.

<thead> and <tfoot> are used as a summary of the columns.

Let’s enhance the previous table with a head and a body:

John LennonRhythm Guitar
Paul McCartneyBass
George HarrisonLead Guitar
Ringo StarrDrums

tfoot particularity

Let’s also add a foot to the table:

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.

Michael Jackson Singles
1979Don'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.

HTML Basics by Jeremy Thomas is licensed under CC BY-NC-SA 4.0



Be the first to comment!