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:

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.

Exercise
Play around with the CSS and see what happens to the table when you reload it.