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.
This page was last updated on 2012-08-21
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:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Rufous</td><td>23</td>
</tr>
<tr>
<td>Fabio</td><td>42</td>
</tr>
</table>
| Name | Age |
|---|---|
| Rufous | 23 |
| Fabio | 42 |
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:
<table>
<tr bgcolor="#ff0000">
<td>cell 1</td>
<td background="stars.gif">cell 2</td>
</tr>
</table>
You could specify the colours in either HEX format or as a named colour.
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.
Using CSS to apply background colours and images is a much better option. For example, to set the background of a cell to yellow, you would write this CSS code:
td {background: yellow; }
colspan
Pay attention, now, because this one is tricky. The colspan attribute allows you to have a single cell spanning multiple table columns. Here’s an illustration:
| Man, I’m so wide! | ||
|---|---|---|
| Damn. | We’re | Not |
See, we got one cell running along the top, spanning 3 columns, while three other cells are below it in the same space. Here'’s the code for you to study:
<table width="200" align="right" border="1">
<tr><th colspan="3">Man, I'm so wide!</th>
</tr>
<tr><td>Damn.</td><td>We're</td><td>Not</td>
</tr>
</table>
| Did I lose weight? | Hmm | |
| We’re | still | here |
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:
<table width="200" align="right" border="1">
<tr><td colspan="2">Did I lose weight?</td><td>Hmm</td>
</tr>
<tr><td>We're.</td><td>still</td><td>here</td>
</tr>
</table>
sourcetip: Get out the old pencil and paper and draw your table layout. It will make figuring out where these attributes should go much easier.
rowspan
Yes, this is basically the same deal, except with rows. Here, I’ll make up another simple example:
| Umm... Yep. |
top right |
| bottom right |
And the code goes a little something like this. Keep your eyes open; this one is a little more confusing:
<table border="1" align="right" width="200">
<tr>
<td rowspan="2">Umm...<br>yep.</td>
<td>top right</td>
</tr>
<tr><td>bottom right</td>
</tr>
</table>
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.
