Introduction to HTML/XHTML

<Previous Page> <Next Page>

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.

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:

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:

The code for this table is:

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:

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:

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:

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:

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.

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:

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:

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

if you wish.

<Previous Page> <Next Page>