Advanced Tables

More complex table layouts require more complex table designs and attributes. Here I’ll be discussing how to get some colour into your tables, a super-funky titling element and two new attributes that will help you out a lot in your layout making. But enough badly-worded intro stuff — let's go!

Note: make sure you have previously read the basic tables tutorial, or you’ll have no chance here.

Table Headers

When you put together a data table you will usually have one or more header cells. There is another type of cell element that you use to show that a cell functions as a header — <th> (Table Header). Use it like so:

That table will appear as shown on the right. As you can probably see, header cells are displayed centred with their text bolded, which makes it clear that they’re headers. While this is good for accessibility, you may want to change how your headers look. Do this through CSS'’s simple text commands.

Also, don'’t use the <th> tag just to make text bold or centred; that goes against the whole idea. You can add a <b> element and align the cell if you want, but th should only be for headers. For more on concerns like this, learn more about creating accessible tables.

Background Colour and Images

The original two attributes used to give background colours and images to your tables will look familiar, as they are the same as the ones used in the body element: bgcolor and background. They could both be placed in any one of the td, th, tr or table tags, affecting those specific areas.

So, for instance, to get a row with a red background with one cell having a starry background (tiled as usual), the code would be:

However, the reason I’m using the past tense here is because the background property is non-standard HTML, and so your code won’t pass through a validator if you use this attribute. Secondly, the bgcolor attribute was deprecated in HTML 4.01, so you shouldn’t use it any more.

Ok, look into the first cell — it has colspan="3" in it, and so spans the three columns below it. I could have had it spanning only two of the columns and had another cell at the top, if that's what I wanted. That might look like this:

Now read that one carefully — the first row is put in, then the first cell takes up both its own position and the position of the cell that would have been below it. Then the second cell is put in still in the top row. Then, and here’s the science part, the second row starts and only one cell is used.

sourcetip: If this is causing you trouble (there’s no shame), get yourself a copy of a visual editor like DreamWeaver. It’s great for table construction.

Both colspan and rowspan can be used together in the same table if you’re feeling really adventurous. Just be careful, all right? Oftentimes you’ll find yourself coding a table that is much more complicated than it needed to be.