Interactive Media Center
University Library, University at Albany

About HTML/XHTML
Technique
Tools
Web vs. Print

Getting Started
Setting Up the Basic Code
Adding and Formatting Text
Nesting Tags
Advanced Text Formatting
Color and the Web
Headings
Lists
Links
Layout and Tables
Advanced Table Formatting
Images
Putting It All Together
Adding An Image
Adding A Simple Table
Main Body Information
Finishing Touches
If You Continue On....

Advanced Table Formatting

You are not limited to formatting a table by specifying only its size and borders. There are many options that you can use to make a table appear the way you want it to.

Cell padding and cell spacing are important attributes that can be assigned to a table. Cell padding is the space between an object in a table cell and the sides of the table cell. Below are two examples that demonstrate what this means.

There is a table with no cell padding

 

There is a table with a cell padding attribute of 10 pixels.

Notice that in the second example there is more space around the text. It is easier read and has a more pleasing appearance. The padding attribute is placed in the opening table tag. The code for the table is:

<table width="284" border="1" cellspacing="0" cellpadding="10">
<tr>
<td align="center">There is a table with a cell padding attribute of 10 pixels.</td>
</tr>
</table>

Cell spacing refers to the space between cells. Here is an example of a table without cell spacing:

   
   

Now here is the same table with 10 pixels of cell spacing.

   
   

While this looks like the borders have increased in size, in actuality they have not. To see what thicker borders look like in a table without cell spacing, examine the sample below:

   
   

To make the difference between cell spacing and borders as clear as possible, here is the same table with 10 pixels cell spacing and 5 pixels for the table borders.

   
   

Using different combinations of cell padding, cell spacing, and borders allows you to control the appearance of your tables so that they can be as useful as possible. Here is a table that combines all three attributes:

Cell Padding 8 pixels Table borders are 4 pixels
Cell spacing is 10 pixels The table is 300 pixels wide

The code for this table is:

<table width="300" border="4" cellspacing="10" cellpadding="8">
<tr>
<td>Cell Padding 8 pixels</td>
<td>Table borders are 4 pixels</td>
</tr>
<tr>
<td>Cell spacing is 10 pixels</td>
<td>The table is 300 pixels wide</td>
</tr>
</table>

Note: The 3-d effect of standard table borders is an old fashioned style. Many Web page builders today want to use table borders, but not the old-fashioned "picture frame"s that we see above. It is possible to create borders in several styles using Cascading Style Sheets. But, the use of CSS is beyond the scope of this tutorial. You may wish to visit our Cascading Style Sheet online tutorial for more information. If you would like to see examples of CSS borders, click here.

Color is added to tables in three different ways:

  1. Table background color
  2. Cell background color
  3. Border color

Below is a table with the background color of #993300. It has standard 1 pixel borders.

   
   

The code for the table is:

<table width="300" border="1" cellpadding="0" cellspacing="0" bgcolor="#993300">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Because the table background color is an attribute that affects the entire table, the color is specified within the opening part of the table tag.

Here is a table in which one cell has the background color of #993366:

   
   

The code for that table is:

<table width="300" border="1" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#993366">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Notice that the background color for the table is in the opening part of the table cell tag. We can create a table that has a background color and a cell that has a different background color, such as:

   
   

Examine the code for this table closely:

table width="300" border="1" cellpadding="0" cellspacing="0" bgcolor="#993300">
<tr>
<td bgcolor="#993366">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

You will see that the background color is applied to the entire table, but the background color is specified for only one cell. This is a very important concept that can be further illustrated with the table below.

   
   

The code for this table is:

<table width="300" border="1" cellpadding="0" cellspacing="0" bgcolor="#993300">
<tr>
<td bgcolor="#993366">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFCC33">&nbsp;</td>
<td bgcolor="#0000FF">&nbsp;</td>
</tr>
</table>

Three of the cells have colors specified, one cell does not. The cell without a color allows the table background color to show through. The background cell colors, on the other hand, have priority over the table background color. Thus, even though the table background color is specified, the cell background colors are displayed! The example below illustrates this a bit better.

Cell Background Color Table Background Color
Cell Background Color Cell Background Color

Confused? This is a concept that may not be easy to grasp at first. The file here, table_demo.txt, is a basic Notepad document with the code necessary to create a table. You can open this file, edit it, and then save it with the file name extension .html. Try editing the table with different background colors and borders to see what happens.

Background images follow the same priority rules as color. Both tables and table cells can have background images.

Here's a table with a clock photograph for a background:

 

Notice that the image repeats. This repetition is called "tiling" because the placement of the image is similar to how tiles are laid.

Below is a similar table with two rows and two columns.

 
   

Now one of the cells has a toy duck in the background. It also tiles, but only inside the cell. The code for this table is:

<table width="267" border="0" cellpadding="0" cellspacing="0" background="images/clock_60.jpg">
<tr>
<td width="171" background="images/duck_small.jpg">&nbsp;</td>
<td width="96"> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

The backgrounds in both the table and the table cell are added as attributes.

The last point about tables that must be touched on here is that there are four alignment attributes for tables. They are default, left, center, and right. The default causes the table to be aligned to the left side of the page unless the visitor's browser causes it the table to be aligned otherwise. Left alignment mandates the table appear on to the left side of the page. Center specifies centering. Right causes the table to be aligned to the right side of the page. These attributes are placed in the opening part of the table tag. The syntax is:

<table align="left">
<table align="center">
<table align="right">

Default alignment does not require an attribute, although you can use

<table align="default">

if you wish.