tadhg.com
tadhg.com
 

HTML Tips: Tables

00:00 Mon 31 May 1999. Updated: 16:24 18 Jan 2007
[, ]
The following article was written quite some time ago, and the information in it is outdated. Using tables for layout is a no-no now, and in addition the structure of tables has changed since the time of writing. The article might still be useful for getting table basics right, but CSS layouts will serve you better.

Tables in HTML are composed of cells. These cells are organized in columns and rows by the ‘table row’ and ‘table data’ tags.
A basic table will have one row and one column, and this is the HTML for it:


<table>
<tr>
<td>
(contents)
</td>
</tr>
</table>

and it looks , rather boringly, like this:

Contents

A key point here is that <td> tags must always be within <tr> tags. In HTML the row must be defined first, then the column. So the code for a four by four table looks like this:


<table>
<tr> -first row
<td> -first column
(contents)
</td>
<td> -second column
(contents)
</td>
<td> -third column
(contents)
</td>
<td> -fourth column
(contents)
</td>
</tr>

<tr> -second row
<td> -first column
(contents)
</td>
<td> -second column
(contents)
</td>
<td> -third column
(contents)
</td>
<td> -fourth column
(contents)
</td>
</tr>

<tr> -third row
<td> -first column
(contents)
</td>
<td> -second column
(contents)
</td>
<td> -third column
(contents)
</td>
<td> -fourth column
(contents)
</td>
</tr>

<tr> -fourth row
<td> -first column
(contents)
</td>
<td> -second column
(contents)
</td>
<td> -third column
(contents)
</td>
<td> -fourth column
(contents)
</td>
</tr>

</table>

and looks like this (I’ve added a border to make sure the table structure is visible – to do this simply include border = "n" in the table tag—I used a value of 1):

(contents) (contents) (contents) (contents)
(contents) (contents) (contents) (contents)
(contents) (contents) (contents) (contents)
(contents) (contents) (contents) (contents)

This is all fine as long as you always want tables where all the cells are the same widths or heights. Tables were originally included in the HTML specification as ways to present accounting statements or statistics and so on—not as a way to do page layout, which is why doing page layout with them is occasionally awkward and tedious. [And why you should now try CSS layouts instead!—Tadhg, Jan 2007]

To get tables to lay out pages, the colspan and rowspan parameters are important, as are the background, width, height, cellpadding, cellspacing, align, valign and bgcolor parameters. colspan and rowspan are used within the <td> tag, as follows:
<td colspan = "3" rowspan = "3">.

A basic table using rowspan and colspan:


<table>
<tr>
<td>stuff 1</td>
<td>stuff 2</td>
</tr>

<td colspan = "2">
spans two columns
</td>
</tr>

<tr>
<td rowspan = "2">
spans two rows
</td>
<td>stuff 3</td>
</tr>

<tr>
<td>Stuff 4</td>
</tr>

</table>
stuff 1 stuff 2
spans two columns
spans two rows stuff 3
stuff 4

Now, this immediately brings up the next point: the table cells stretch to accommodate the text in them, and also shrink when under pressure from other cells. In the above example, since we’ve done nothing to specify the width of the cells the right side shrinks to allow the cell with ‘spans two rows’ in it to stay on one line.

We can alter this using the width parameter for the cells. Width and height take either pixel or percentage values. Percentage values must be followed by the % sign. Pixel values are just numbers.


<table>
<tr>
<td width = "50%">stuff 1</td>
<td width = "50%">stuff 2</td>
</tr>

<td colspan = "2">
spans two columns
</td>
</tr>

<tr>
<td rowspan = "2" width = "50%">
spans two rows
</td>
<td width = "50%">stuff 3</td>
</tr>

<tr>
<td width = "50%">Stuff 4</td>
</tr>

</table>
stuff 1 stuff 2
spans two columns
spans two rows stuff 3
Stuff 4

However, all the cells in a column have to be the same width. If we try to insist that the second cell in the last row (stuff 4)be 20% in width, it will ignore the parameter:


<table>
<tr>
<td width = "50%">stuff 1</td>
<td width = "50%">stuff 2</td>
</tr>

<td colspan = "2">
spans two columns
</td>
</tr>

<tr>
<td rowspan = "2" width = "50%">
spans two rows
</td>
<td width = "50%">stuff 3</td>
</tr>

<tr>
<td width = "20%">stuff 4</td>
</tr>

</table>
stuff 1 stuff 2
spans two columns
spans two rows stuff 3
stuff 4

All cells in a column will expand to match the width of the widest column in that column. So, if we alter the width of the stuff 4 cell to 600 pixels, all of the cells in that column will expand, unless you’re on a really high resolution monitor:


<table>
<tr>
<td width = "50%">stuff 1</td>
<td width = "50%">stuff 2</td>
</tr>

<td colspan = "2">
spans two columns
</td>
</tr>

<tr>
<td rowspan = "2" width = "50%">
spans two rows
</td>
<td width = "50%"gt;stuff 3</td>
</tr>

<tr>
<td width = "600">stuff 4</td>
</tr>

</table>
stuff 1 stuff 2
spans two columns
spans two rows stuff 3
stuff 4

This also has knock-on effects. Since the entire table is pushed to a larger size, the left-hand cells also get larger, since they’re now 50% of a larger structure.

The main reason this feature of the cells is important is that images and / or text may effect the size of table cells, and if not watched carefully will destroy the structure of the table, at least in page layout terms.

The height parameter works as you would expect. The height of cells in a row will expand to match the highest cell, as with the first row here:


<table>
<tr>
<td height = "50" width = "50%">stuff 1</td>
<td width = "50%">stuff 2</td>
</tr>

<td colspan = "2">
spans two columns
</td>
</tr>

<tr>
<td rowspan = "2" width = "50%">
spans two rows
</td>
<td width = "50%">stuff 3</td>
</tr>

<tr>
<td width = "50%">Stuff 4</td>
</tr>

</table>
stuff 1 stuff 2
spans two columns
spans two rows stuff 3
Stuff 4

Note that although height theoretically takes percentage values, using them has no effect.

width and height can also be used with the table tag itself, as either pixel or percentage (of the entire page / frame) values. Both will be over-ridden if the content of the table is larger than the values specified.

The other parameters are background, cellpadding, cellspacing, align, valign and bgcolor.

background defines an image to be used as a background and can be used in either the table or td tags, as follows:


<table background = "pics/bg.jpg">

There is a major problem with this parameter in Netscape, as the image will be redrawn, starting from its leftmost, uppermost point, in every cell. This does not occur in Internet Explorer. Take this code as an example:


<table background = "/images/design/seamless/sphere1.jpg" border = "1">
<tr>
<td width = "128" height = "128">&nbsp;</td>
<td width = "128" height = "128">&nbsp;</td>
</tr>
<tr>
<td width = "128" height = "128">&nbsp;</td>
<td width = "128" height = "128">&nbsp;</td>
</tr>
</table>

Here’s what happens in Netscape:

   
   

Here’s what happens in Explorer:

   
   

cellpadding is the amount of white space between the borders of the table cell and the cell content. Not setting this is equivalent to setting it to 1, so if using tables to fit images together always specify a cellpadding and cellspacing of 0.

Here’s an example. The table has a bgcolor of red.. With a cellpadding cellpadding of 5 we can’t see much:


<table cellpadding = "5" bgcolor = "#ff0000">
<tr>
<td width = "50%" bgcolor = "#0000ff">stuff 1</td>
<td width = "50%">stuff 2</td>
</tr>

<td colspan = "2">
spans two columns
</td>
</tr>

<tr>
<td rowspan = "2" width = "50%">
spans two rows
</td>
<td width = "50%">stuff 3</td>
</tr>

<tr>
<td width = "50%">stuff 4</td>
</tr>

</table>
stuff 1 stuff 2
spans two columns
spans two rows stuff 3
stuff 4

But this is the same with a cellpadding of 40, and we see that the area around the content of the cells has expanded dramatically:


<table cellpadding = "40" bgcolor = "#ff0000">
<tr>
<td width = "50%" bgcolor = "#0000ff">stuff 1</td>
<td width = "50%">stuff 2</td>
</tr>

<td colspan = "2">
spans two columns
</td>
</tr>

<tr>
<td rowspan = "2" width = "50%">
spans two rows
</td>
<td width = "50%">stuff 3</td>
</tr>

<tr>
<td width = "50%">stuff 4</td>
</tr>

</table>
stuff 1 stuff 2
spans two columns
spans two rows stuff 3
stuff 4

cellspacing is the amount of space inserted between individual table data cells. Not setting this is equivalent to setting it to 1. The next table in comparison with the last one should demonstrate the difference between cellpadding and cellspacing:


<table cellspacing = "40" bgcolor = "#ff0000">
<tr>
<td width = "50%" bgcolor = "#0000ff">stuff 1</td>
<td width = "50%">stuff 2</td>
</tr>

<td colspan = "2">
spans two columns
</td>
</tr>

<tr>
<td rowspan = "2" width = "50%">
spans two rows
</td>
<td width = "50%">stuff 3</td>
</tr>

<tr>
<td width = "50%">stuff 4</td>
</tr>

</table>
stuff 1 stuff 2
spans two columns
spans two rows stuff 3
stuff 4

The bgcolor parameter that I’m using to demonstrate uses the same format as the bgcolor parameter for the <body> tag, and takes the standard HTML RGB colour settings. The bgcolor parameter for a <td> or <tr> overrides the setting for the table, which is why stuff 1 is on a blue background.

align can be used for table, tr and td tags, with different effects. If used as part of the table tag, it aligns the table on the page. If used as part of the td tag, it sets the value for all the cells in the row. If used as part of the td tag, it aligns the text within the cell. In the table tag it takes values of ‘left’ or ‘right’ and in the td tag also take ‘center’. Not setting this value is equivalent to setting it to ‘left’.For example:


<table>
<tr>
<td height = "50" width = "50%">stuff 1</td>
<td width = "50%">stuff 2</td>
</tr>

<td colspan = "2">
spans two columns
</td>
</tr>

<tr>
<td rowspan = "2" width = "50%">
spans two rows
</td>
<td width = "50%">stuff 3</td>
</tr>

<tr>
<td width = "50%" align = "right">Stuff 4</td>
</tr>

</table>
stuff 1 stuff 2
spans two columns
spans two rows stuff 3
Stuff 4

valign controls vertical alignment in a similar way. If used in the table tag it sets the default valign for all the individual cells (i.e. it doesn’t affect the placing of the entire table on the page). If used in the tr tag it sets the values for all the cells in the row. It accepts values of ‘top’ ‘bottom’ and ‘middle’. Not setting this is equivalent to setting it to ‘middle’. Here’s an example:


<table>
<tr>
<td height = "50" width = "50%" valign = "top">stuff 1</td>
<td width = "50%">stuff 2</td>
</tr>

<td colspan = "2">
spans two columns
</td>
</tr>

<tr>
<td rowspan = "2" width = "50%">
spans two rows
</td>
<td width = "50%">stuff 3</td>
</tr>

<tr>
<td width = "50%" align = "right">Stuff 4</td>
</tr>

</table>
stuff 1 stuff 2
spans two columns
spans two rows stuff 3
Stuff 4

There is also a border tag, which is what I’ve been using to show the table structure. This is used in the table tag, and takes a numerical value, which is what the size of the border will be. This defaults to 0 if undefined. In Internet Explorer, the color of the border, or its light and dark sides, can be set with bordercolor, bordercolorlight and bordercolordark parameters. These are hardly ever used; they take the same color format as usual ("#ff0000" for red, alternatively "red" for red).
There are a number of other parameters supported only by Internet Explorer, as well as properties related to Styles and to JavaScript, but these are outside the scope of this document.

Leave a Reply