Tables

As expected, the <table> element is meant for content that is a table. Tables are complicated, however, so it requires a lot of other tags to add the proper structure.

When using them, remind yourself that this structure is good. It allows the computer (search engines, screen readers, …) to understand your content perfectly, and it allows you to easily style the table later.

Tables are perhaps the best example of why semantics matter. In the old days, CSS wasn’t good enough yet to easily place stuff in a grid. But grids are nice. Many websites wanted a home page with a grid of articles or images.

So what did people do? People started using HTML tables to achieve this layout.

The result was a confusing mess, both for the programmers as well as the search engines. The HTML clearly stated “this is a table”, but the content wasn’t a table at all! The element was only used for how it looked, not for its meaning.

Nowadays, creating grids or table-like visuals with CSS is easypeasy. So only use the <table> tag when displaying content that is actually a table.

A table is the most efficient way to combine multiple pieces of data and how they intersect.

For example, the columns are different models of smartphones, and the rows are different features. A table is the best way to present this crossing of information: for each smartphone, it can show whether the feature is present or not.

I use tables often in my courses, when I need to list multiple things at once. Such as “attribute” + “values it takes” + “what it does”. (When only listing one thing … use a list.)

Head vs Body (again)

Hopefully, you see this recurring theme throughout the whole course. It’s a valuable lesson to learn in general: when working with data (or “content”), you always have these two parts: the content itself, and information about the content.

Tables are no different. Your first step is to create a <thead> and <tbody> element. The header will contain the names for the columns, the body the actual table. (A <tfoot> element also exists, for footnotes to the table.)

Well … I don’t see anything yet. Let’s add some content to the table.

Rows & Columns

Tables in HTML are laid out vertically, then horizontally. In other words,

• You first define the rows (moving down)
• Inside each row, you define the different cells (per column, moving left to right)

To create a row, use the <tr> tag. This is true for both the head and the body.

To create a header cell, use <th>. This refers to the cells in the first row and column, those that describe the meaning of the row/column.

Otherwise, use <td> ( = table data) for all other cells.

Notice how the browser makes the headers bold and centered by default.

Regular vs Irregular

Notice how I have to provide the same number of columns in each row. (Two for each, in the previous example.) Even if empty, you must make sure all rows have the same size. That’s the basic, default, regular table.

But what if you want some cells to cover a larger area? What if you want a heading to span multiple columns? Then you create an irregular table through certain attributes.

• colspan: how many columns this cell should span (a number)
• rowspan: how many rows this cell should span (a number)

There’s only one rule: the numbers still have to add up. In the end, all rows should have the same number of columns, and all columns the same number of rows. It is now upon you, the developer, to make sure this is true.

Caption

You can add a caption to your table with, unsurprisingly, the <caption> element. This must, however, be the first element in the table.

Colgroups

You might have a table where multiple columns belong together. Perhaps you want to style them similarly. You can do this using the <colgroup> element. This element must come after the caption, but before the rest of the content.

Why not use a <div> or something? Because a table will think the whole div is just one cell. Because, well, it is one element. It will ruin both the meaning of the table and how it’s laid out.

No, tables should follow the regular structure I explained above. To group them …

• Create a new <colgroup> element.
• Inside, add <col> elements (until you’ve described all columns). Each can take a span attribute, which is a number saying how many columns this group spans.

The alternative is to manually assign the same class to all cells in the group. That way, you can grab the whole group easily using CSS or JS later. And you still communicate, to the computer, that these cells belong together.

Now we’re finally ready for some more interaction!