This is a printer-friendly version. The navigation and other unnecessary elements have been removed.

Come back and visit us at www.yourhtmlsource.com. Enjoy! PATH // www.yourhtmlsource.com Tables ADVANCED TABLES

Advanced Tables
by Ross Shannon More complex table layouts require more complex table designs and attributes. Here Ill 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 youll have no chance here.
This page w as 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>

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 theyre headers. While this is good for accessibility, you may want to change how your headers look. Do this through CSS's simple text commands. Name Rufous Fabio Age 23 42

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 Im using the past tense here is because the background property is non-standard HTML, and so your code wont pass through a validator if you use this attribute. Secondly, the bgcolor attribute was deprecated in HTML 4.01, so you shouldnt 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. Heres an illustration: 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: Man, Im so wide! Damn.
<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>

Were

Not

</table>

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: Did I lose weight? Hmm Were still here

<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, Ill make up another simple example: And the code goes a little something like this. Keep your eyes open; this one is a little more confusing: Umm... Yep. top right bottom right

<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 heres the science part, the second row starts and only one cell is used. sourcetip: If this is causing you trouble (theres no shame), get yourself a copy of a visual editor like DreamWeaver . Its great for table construction. Both colspan and rowspan can be used together in the same table if youre feeling really adventurous. Just be careful, all right? Oftentimes youll find yourself coding a table that is much more complicated than it needed to be.