HTML Cookbook: Table Tags

Let's discuss the tags used in building a table.

The table tag is similar to a body tag. It determines the overall look of your table. The attributes of the table tag can be put in any order. We'll put each one on a separate line for the purposes of our discussion:

<table 
align="??"
bgcolor="??"
background src="URL_of_image"
transparency="??%"
border="??"
cellspacing="??"
cellpadding="??"
height="??"
width="??">

<table>

You can align your table in your sig or on your page. Use: align="left", align="center" or align="right". The default is "left".

Your table can have its own background color (bgcolor). Replace ?? with the color you want.

Your table can have its own background. Replace ?? with the URL of an image.

You can make your table partly transparent, so your page background will "show through". Choose a percentage from 1-100

Your table can have a border. Replace ?? with a number of pixels. The default is "1", but WebTV typically "sees" "0"

Cellspacing will put space around your cells. Replace ?? with the number of pixels you want. The dafault is "1"

Cellpadding is the amount of space around your information inside each cell. Replace ?? with a number of pixels.

Think of cells as crates with items in them. Cellspacing is like moving the crates apart from each other. Cellpadding is like putting bubblewrap around the items in the crates.

For example, let's put an image in a table cell, then change the cellspacing & cellpadding amounts.

Table Code

cellspacing="0", cellpadding="0"

cellspacing="15", cellpadding="0"

cellspacing="0", cellpadding="15"

cellspacing="15", cellpadding="15"

Your table can have a fixed height & width in pixels. This is useful for putting an image that is one size on top of a background with a larger size.

You can also enter width as a percentage. The information on this page is inside a table with a width of 90%. This gives us margins on the left & right sides.

<td>

The table data tag can give each cell in a table it's own look:

<td
bgcolor="?"
background="URL"
height="?"
width="?"
align="?" (left, center or right)
valign="?" (top, middle or bottom)
colspan="?" rowspan="?" gradcolor="?" (WebTV only)
gradangle="?" (WebTV only)
>

Each cell can have its own bgcolor. Enter a color.

Each cell can have its own background. Enter the URL of an image.

You can specify height and/or width for a cell by percentage or pixels. If you don't use these attributes, the largest cell will simply adjust itself to match your data.

Important concept:: All cells in the same row will have the same height.; All cells in the same column will have the same width.

You can align data in each cell horizontially. The default is "left".

You can valign data in each cell vertically. The default is "middle".

You can combine adjacent cells in the same row to make a "longer cell" using colspan.

You can combine adjacent cells in the same column to make a "taller cell" using rowspan

Tell me more about colspan & rowspan.
Each cell can have a gradcolor (gradient color) that is different from the bgcolor in that cell. The color will gradually change from the bgcolor to the gradcolor.

The gradangle determines the direction (0-360 degrees) in which the color change takes place. The default is "0". Tell me more about gradcolors.

<th>

The table header tag is a special form of table data tag. It is typically used in the first row of a table. It will automatically center text and make it bold:
<th> text </th> is the same as
<td align="center"><b> text </b></td>.

Back to Introduction To Tables
Table Examples
More About Gradcolors