Module 5 - Page 08 - Table Miscellanea

Table Miscellanea

BORDER, CELLPADDING, CELLSPACING, BGCOLOR, and the CAPTION tag

There are just a few more things you need to know about tables before we conclude this module. We've already talked about the BORDER attribute in a general way, and you know that it creates a visible border around a table. Usually we set border="1", which gives us a one pixel border. As we increase the border value, only the outside edge of the table grows; the space between the cells does not change. Large border sizes are rarely used in the professional world.

Tag: TABLE
Attribute: BORDER
Values: integers representing number of pixels; default is 0 (no border)
Description: creates border around table.

Here are some actual examples:

Normal one pixel border:

<table border="1">
<tr>
<th>Goo</th>
<th>Gah</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Displayed:

Goo	Gah
1	2

10 pixel border:

<table border="10">
<tr>
<th>Goo</th>
<th>Gah</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Displayed:

Goo	Gah
1	2

20 pixel border:

<table border="20">
<tr>
<th>Goo</th>
<th>Gah</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Displayed:

Goo	Gah
1	2

To increase the amount of space in-between the cells, we must also set the CELLSPACING attribute using pixel values; by default, cellspacing="1", which is one pixel of space between the cells; cellspacing="10" would be 10 pixels of space.

Tag: TABLE
Attribute: CELLSPACING
Values: integers representing number of pixels between cells.
Description: creates space between cells in a table.

Example (border of 10, cellspacing of 10):

<table border="10" cellspacing="10">
<tr>
<th>Goo</th>
<th>Gah</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Displayed:

Goo	Gah
1	2

Example (border of 1, cellspacing of 20):

<table border="1" cellspacing="20">
<tr>
<th>Goo</th>
<th>Gah</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Displayed:

Goo	Gah
1	2

There is one additional attribute for table: CELLPADDING. Cellpadding is the space between the content of the cell and the edge of the cell. Default cellpadding values vary cross-browser and cross-platform, but are usually about 1 to 2 pixels.

Tag: TABLE
Attribute: CELLPADDING
Values: integers representing number of pixels between content and edge of cell.
Description: creates space between content in a cell and the edge of a cell.

One pixel cellpadding:

<table border="1" cellpadding="1">
<tr>
<th>Goo</th>
<th>Gah</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Displayed:

Goo	Gah
1	2

Fifteen pixel cellpadding:

<table border="1" cellpadding="15">
<tr>
<th>Goo</th>
<th>Gah</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Displayed:

Goo	Gah
1	2

Fifteen pixel border, cellspacing, and cellpadding:

<table border="15" cellspacing="15" cellpadding="15">
<tr>
<th>Goo</th>
<th>Gah</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Displayed:

Goo	Gah
1	2

For more information on precise pixel sizes for border, cellspacing, and cellpadding in combination, check out "HTML and XHTML: The Definitive Guide", section 10.2.1.8, p.362-363.

There is one last attribute you should know about: BGCOLOR. BGCOLOR allows you to set the background color for a single cell, a row of cells, or an entire table.

Tag: TABLE, TR, TH, TD
Attribute: BGCOLOR
Values: hex codes (#FFFFFF, #3399CC) or named colors (red, blue, etc)
Description: colors tables, table rows, and table cells.

Example:

<table border="1" bgcolor="#FFCCCC">
<!-- the first row reflects the general table color -->
<tr>
<th>Goo</th>
<th>Gah</th>
<th>Gulp</th>
</tr>
<!-- the second row is colored via the TR tag -->
<tr bgcolor="#CCFFFF">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- the third row has individually colored cells -->
<tr>
<td bgcolor="#FFFF99">1</td>
<td bgcolor="#FFFFFF">2</td>
<td bgcolor="#FFFF99">3</td>
</tr>
</table>

Displayed:

Goo	Gah	Gulp
1	2	3
1	2	3

Note: If you want consistent appearance cross-platform and cross-browser, the BGCOLOR attribute should ONLY be added to TH and TD tags.

Tables using the BGCOLOR attribute in cells are particularly useful in so-called "GIF-less" design, wherein colored table cells (which have very small file size) can stand in for flat-color GIFs in rectangular designs.

One last thing, and then we're done. The CAPTION tag is a rarely-used feature of the TABLE tag. It allows you to create a caption above or below the table which describes the purpose of the table. The CAPTION tag is usually placed just inside the opening TABLE tag, and has one important attribute, ALIGN. ALIGN tells the browser whether to display the caption at the top of the table (default) or the bottom.

Tag: CAPTION (always closes)
Attribute: ALIGN
Values: top, bottom
Description: CAPTION creates a caption for a table which displays above or below the table.

Example:

<table border="1">
<caption>Table 1.1</caption>
<tr>
<th>Goo</th>
<th>Gah</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Displayed:

Table 1.1
Goo	Gah
1	2

Example:

<table border="1">
<caption align="bottom">Table 1.1</caption>
<tr>
<th>Goo</th>
<th>Gah</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Displayed:

Table 1.1
Goo	Gah
1	2

Again, since most people don't use tables to create traditional tables of data, the CAPTION tag is not often used, but it is fully supported by all modern browsers. For more information, see "HTML and XHTML: The Definitive Guide", section 10.2.5, pp375-377.

Now that we've reviewed these attributes and the CAPTION tag, I recommend making a few tables yourself which use them; this will allow you to get a feel for how they behave, as well as to remember them better. Next week, we will look into tables from a very practical light, discussing real world professional table creation techniques.

Main Menu