How to create HTML5 Tables

With HTML5, tables got a bit of a makeover in terms of structure. Take a look at the following code:



If you want to play around with the code, open up the file called table_html5.html which is in the extra_files/tables folder that came with this course. (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course (You don't need the downloads for the old course.)

The table data itself is the same as the previous one. But notice the new table tags we've used:

THEAD
TFOOT
TBODY

THEAD is where you put the data for the first row of your table. You then add the TR and TD tags. Bizarrely, the TFOOT tags come after THEAD and before TBODY. If you put the TFOOT tags after TBODY your table may not work in some browsers.

The TFOOT has no TR tags, just a TD. We've added a COLSPAN attribute here, as CSS doesn't do column or row spanning very well, or at all.

The TBODY tags contain most of the TR and TD tags.

If you have a look at the TABLE tag at the top you'll see that it no longer has any attributes. It's just this:

<TABLE>

Previously, we had this:

<TABLE Border = "1" CellPadding = "10" CellSpacing = "2" align="center">

These were all formatting attributes we added to the TABLE tag. Now, we can do this with CSS.

Open up the file called html5_tables.css which is in the extra_files/css folder. Take a look at the CSS code:



With the new structure of our table, we can use the HTML selectors (TABLE, THEAD, TFOOT, etc). The TABLE selector is used to set up the border, the border spacing, background colour, text alignment, and font family. This allows us to get rid of all those attributes from the previous table.

Notice, too, that we have separate THEAD and TD selectors, and a joint one: THEAD, TD. We could have put the padding in the TABLE selector, but we've done it like this just to show you that you can set up rules for more than one HTML tag on the same line. Separate each one with a comma.

The only class selector is at the bottom, LeftCol. This is applied to only those cells that need to be left aligned and made bold.