More Table Techniques

• Intermediate HTML
• Table of Contents
• Identification
• Decoration
• Organization
• Illustration
• Interaction
• Styles
• Big Picture
• Resources
• HTML Stds.

Go to • Spacing • Thick Rows, Wide Columns • Colors • Nesting

Headings & Captions

You can put a caption (table title) and/or headings (row or column titles) on your table by using special tags. The <caption></caption> tags go right after the <table> tag.  The <caption> tags do not alter the default font. And headings are designated by <th></th> tags instead of the expected <td></td> tags.<th> tags automatically bold the heading text. This example table, with caption and headings:

would be coded like this:

<table border="2" >
<caption>Killer B's at Bat</caption>
<tr><th>Player</th><th>Season Avg.</th><th>Playoff Avg.</th></tr>
<tr><td>Bagwell</td><td>.304</td><td>.143</td></tr>
<tr><td>Bell</td><td>.314</td><td>.125</td></tr>
<tr><td>Biggio</td><td>.325</td><td>.185</td></tr>
</table>

You can put a caption at the bottom of the table instead of the top by adding this attribute to the <caption> tag: <caption align=bottom>.

If you want your table centered, you can of course enclose the whole thing between <center></center> tags. But it's preferable (since <center> tags are deprecated in the newest standards) to add an attribute to the<table> tag:

<table align="center">

Just change "center" to "left" or "right" for those kinds of alignments.

[Back to top]

Spacing

You can specify the spacing around the content in your table cells, and the spacing between cells, by adding attributes to the <table> tag:

cellspacing regulates spacing between cells, with the amount given in pixels.
cellpadding regulates spacing within each cell, around the cell content, again in pixels.

This is a modified version of the above table with the default cellspacing="1" changed to cellspacing="10":

Resetting the cellspacing to"1," I'll now change the cellpadding to show you what that does. The table above accepted my editor's default cellpadding of "2." Look at the same table with cellpadding set to "10":

You can also place your content differently within the cell, by adding an attribute to the <td> tags:

<td align="center"> will center the content in the cell. Of course, you can also align the content on the left or right by this method as well. To align the content from top to bottom, use the valign attribute. The default is "middle," while the other choices are "top" and "bottom." Adding these attributes to <tr> tags makes them apply to the whole row, although you can override it for individual cells.

Different browsers put space before and after elements like tables and lists differently. If you want to be sure your table is surrounded by white space, add a closing <p> tag--</p>--or a <br> after your last paragraph before the table. And put a <p> or a <br> after it. You may have to do some experimenting with spacing around your table to get it right, particularly if you are using an HTML editor, since some of them handle this issue differently than you might like.

A final point about spacing. It is possible to specify a width for the table and for its columns. But because of the large variety of possible viewing circumstances, it's usually not a good idea to do this. If you're using a table for setting the major layout of the page, you might want to specify some widths, but do it in percentages, rather than absolute pixel numbers. That way, your readers' browsers can adapt your design to their own situation.

[Back to top]

Thick Rows, Wide Columns

You can further customize your table layout by using some other attributes which cause one cell of a row to "span" more than a normal row's height:

The coding for this table looks like this:

<table border="2" >
<tr><td rowspan=2>Math</td>
<td>Algebra</td></tr>
<tr><td>Calculus</td></tr>
<tr><td rowspan=2>English</td>
<td>Composition</td></tr>
<tr><td>Literature</td></tr>
</table>

You can do the same thing with columns:

The attribute used to accomplish this display is colspan, and the coding for the whole table looks like this:

<table border="2">
<tr>
<th colspan=2>German</th>
<th colspan=2>French</th>
</tr>
<tr><td>Formal</td>
<td>Informal</td>
<td>Formal</td>
<td>Informal</td>
</tr>
<tr>
<td>Sie</td><td>du</td>
<td>vous</td><td>tu</td>
</tr>
</table>

[Back to top]

Colors

To make really fancy-looking tables, you can add background colors to the <td> tags. This is especially useful when you are using borderless tables to set up your page layout. The attribute is bgcolor and you can use color names for common colors or RGB codes for any colors. You have to use bgcolor, rather than background, for this attribute and as a consequence, you can't use an image for background in a cell. (Although by using styles you can give your tables or cells background images; see the new Styles section of this guide for information. Also, see the Decoration and Illustration sections for more general information on colors and images.)

An even better way to color your tables is by using styles. Just create a class that specifies the background color and apply that class to your table cells. For more information, see the Styles section of this guide.

Don't forget that if you use dark background colors, specify a lighter font color to make the table content readable.

Our Math/English table from above looks a little spiffier with added color:

To accomplish this, I simply added bgcolor="teal" to the Math and English <td> statements, bgcolor="Yellow" to Algebra and Calculus, and bgcolor="navy" to Composition and Literature. I also put <font color="yellow"></font> tags around "Composition" and "Literature." If you want an entire row to be a certain color, add the bgcolor attribute to the<tr> tag (it can be overridden for individual cells).

I learned a very simple yet stylish trick with table colors from Cnet. Take a look at this table:

This snazzy look is easy to set up. First of all, make the table borderless by adding border=0 to the<table> tag. Then apply the background colors (and font color) as described above. The pièce de la résistance (see Special Characters in the Decoration section of the guide, to see how I got those accents to display) is provided by adding a column in between each column with content and putting a non-breaking space character in it. This character is &nbsp; and you have to have it to keep some browsers from simply collapsing the "empty" cells.

Here is the coding for the above table:

<table border="0" cellpadding="2">
<tr>
<td bgcolor="black">
<font color ="white"><b>Last 3 World Cup winners:</b></font></td>
<td>&nbsp;</td>
<td bgcolor="red"><b>France</b> </td>
<td>&nbsp;</td>
<td bgcolor="green"><b>Brazil</b></td>
<td>&nbsp;</td>
<td bgcolor="yellow"><b>Germany</b></td>
</tr></table>

Très bon, non?

[Back to top]

Nesting Tables

Should the need arise, you can nest one table inside another. As you can imagine, the coding for such a mega-table will be pretty complex-looking, but the logic of the display is fairly straightforward.

The basic coding for this table is below. I will leave determining which other tags I used as an exercise for the reader.

<table boder="2" >
<tr><td>How a</td>
<td>

<table border="2" >
<tr><td>table</td><td>within</td></tr>
<tr><td>a</td><td>table</td></tr>
</table>
</td></tr>

<tr><td>might</td><td>look</td></tr>
</table>

You can also put lists in tables, by simply including the entire list coding inbetween <td></td> tags. Here is an example:

To code for a display like this, just type:

<table border="2" >
<tr><td>Browser Choices</td>
<td>
<ul>
<li>Netscape</li>
<li>Explorer</li>
<li>Other</li>
<ul></td></tr>
</table>

[Back to top]

Having said all these wonderful things about tables, I do have to caution you about the fact that not all of your readers will be able to enjoy them in all their glory. We don't really have to worry about the old browsers who couldn't display tables, but instead we need to be concern about new speaking and other assistive browsers which might result in your content being read out of order. So you might want to provide alternative displays of essential content, and keep that First Commandment of web authoring firmly in mind:content is more important than appearance. If they can read what you have to say, they don't have to marvel over your graphic design, too. More information about the problems tables can cause and some ways around them can be found in this article by Alan J. Flavell: Tables in Non-Table Browsers.

Fortunately, styles offers positioning alternatives that can take the place of tables. I'm not conversant enough with them to explain them, but there are resources in the Styles section of this guide that can help you (and me, eventually, I hope) learn to use these techniques.

Back to Intermediate HTML--Organization

Back to Intermediate HTML main page