Chapter 4: Tables

There are two ways to insert a table of information on a web page:

1. Text table
2. Graphics table

A text table simply contains text, evenly spaced out on the page. Here's an example:

A graphical table appears as a graphical element on the web page. Graphical tables allow you to include design elements such as color, shading, and borders. Graphical tables are more flexible and attractive than text tables.

Creating a Text Table

To create a text table, you have to control the type of font that is used. A text table relies on spaces and characters that fill those spaces to create its column boundaries. You have to use a fixed width font, which is a font that allots the same amount of space to each character and to empty spaces between characters. Most typeset documents and word processing documents use proportional fonts, which are fonts in which the width of each character varies according to the character's shape.

Have you ever tried to line up columns of information in a word processor by using the space bar? You probably noticed that, no matter how careful you were to make things line up, the columns never lined up exactly. Even if you were able to get them to line up on the screen, when you printed the page, the columns did not align properly. This is because proportional fonts allow an exact amount of space horizontally, for each letter, which can be totally different for every letter. A lowercase L will us a very small amount of space and a W will take up a lot of space horizontally. Fixed width fonts use exactly the same amount of space for every character.

HTML ignores extra blank spaces, blank lines, or tabs. However, you can insert the <PRE> tag to display preformatted text, text formatted in ways that you want retained in your web page. Any text formatted with the <PRE> tag also displays text using a fixed-width font. When using the <PRE> tag, every space will appear in your web page. So, to align data in a text table, you can use the <PRE> tag and press the space bar as many times as needed to align data vertically.

Graphical Tables

To create a graphical table with HTML, you start with the <TABLE> tag. Then, insert a <TR> tag for each table row, ending each table row with a </TR> tag. Finally, for each cell, insert a <TD> tag to indicate table data, and end the cell with a </TD> tag. In our example, let's add the optional property BORDER=1 to our <TABLE> tag so we can see the border around each table cell. Here is the code for a simple table:

 This code produces the following graphical table:

Let's recap: <TR> tag is for the table row, and the <TD> tag is for the table data.

Are we ready for a pop quiz? Let's take the quiz...

As you can see, <TR> actually means NEXT ROW and <TD> means NEXT COLUMN.

Table Headers

HTML provides a special tag for cells that will act as table headers (or column headings): the <TH> tag. We can use a <TH> (TABLE HEADER) tag in place of the <TD> tags for the first row of a table. The <TH> tag actually centers the text and makes the text appear in bold type.

Table Captions

We can add a table caption using the <CAPTION> tag. The syntax for the <CAPTION> tag is:

Where value indicates the caption placement - either TOP (above the table) or BOTTOM (below the table). The caption is centered in relation to the table. Also, the <CAPTION> tag must be placed within the <TABLE> tags.

Example of table headings and a table caption

The code above will produce the following table:

Table Borders

By default, browsers display tables without borders. The syntax for creating a table border is:

where size is the width of the border in pixels. Only the outside border is affected by setting the size of the border property. Here are a few examples of  different values for the border property:

In the following example, you can see tables with different border sizes; 0, 1, 5, 10, 15, 20 and 25.

Cell Spacing

You can change the spacing between cells with the CELLSPACING property, which uses the following syntax:

where size is the width of the interior borders in pixels. The default spacing is 2 pixels. The following is an example using different cell spacing values of 0, 1, 2, 5, 10, 15 and 20.

Cell Padding

You can change the spacing between the text and the surrounding cell borders by changing the amount of cell padding in a table. The syntax for CELLPADDING property is:

where size is the distance from the table text to the cell border, in pixels. The default sell padding is 1 pixel. Here is an example of several tables with different CELLPADDING values:

Table and Text Alignment

By default, the browser places a table on the left margin, with surrounding text above and below the table, but not on the left or right. You can control this behavior by adding the ALIGN property to the <TABLE> tag. The syntax for the ALIGN property is:

where alignment equals LEFT, RIGHT, or CENTER. The ALIGN property is similar to the ALIGN property used with the <IMG> tag. LEFT and RIGHT alignment places the table on the page's margin and wraps surrounding text to the side. The CENTER alignment places the table in the center of the page, but text does not wrap around the table. The ALIGN property is available only with browsers that support HTML 3.2 or later. Earlier browsers will ignore the ALIGN property.

You can also add the ALIGN property to the <TD> tag to align text within table cells. By default, text is left aligned in a table cell. The VALIGN property allows you to control the vertical placement of text within a table cell. By default, text is at the TOP of the cell. You can also set the VALIGN property to MIDDLE or BOTTOM. You can also use the ALIGN and VALIGN property with the <TR> tag to align all the text within a single row the same. Here are the various ALIGN and VALIGN property values:

Table and Cell Size

The size of a table is determined by the text it contains. By default, HTML places text on a single line. If you insert additional text in a cell, the width of the column and table will increase up to the page edge, still keeping the text on a single line - unless you insert a break, paragraph, or header tag within the cell. As text is added, the height and width of the table, and individual table cells, expand and contract to adjust to the new text. If you want more control over the size of the table and table cells, you can define the width and height. The syntax for defining the table size is:

where size is the width and height of the table, either in pixels or as a percentage of the browser window. When you specify percentage values, they must be enclosed in quotes. For example, WIDTH="100%" would cause the table to become 100% of the width of the browser window. You probably don't want to specify a width in pixels of more than 600 since some people may view your page with a screen resolution of 640 x 480 - much wider than 600. If you did, your table will scroll off the page as you can see in the example below:

You can use the WIDTH property with the <TD> and <TH> tags as well. To set the width of an individual cell, you add the WIDTH property to the TD tag with the following syntax:

<TD WIDTH=size>

where size is the width of the cell, either in pixels or as a percentage of the table width. However, since each cell is a part of an entire column, the largest cell in a column will become the width of all the cells in that column. In order to make certain that a column in a specific width, you would need to set the width property for each <TD> tag in that column to the same value.

Table Background

By default, the table background color is the same as the page background color. To change the background color for the entire table, insert the BGCOLOR property in the <TABLE> tag. To change the background color for individual cells in a table, insert the BGCOLOR property in the <TR>, <TH>, or <TD> tags.

If you expect your web page viewers might use a browser other than IE or NS, you will want to make sure that your choice of colors work with the background color either on or off.

Setting color for the table follows a hierarchy. Using the BGCOLOR property for the <TABLE> tag sets the background color for all cells in the table. You can override this color choice for a single row by using the BGCOLOR property in the <TR> tag. Additionally, you can override the color for a single cell by using the BGCOLOR property in the <TD> or <TH> tag.

The syntax for setting the table background color is:

where color is either an HTML color name or the RGB color value.

Here is an example of an Auburn and an Alabama table:

Spanning Rows and Columns

A spanning cell is a cell that occupies more than one row or column. It is similar to merging table cells in a word processor. You can create spanning cells by inserting the ROWSPAN and COLSPAN properties in a <TD> or <TH> tag. The syntax for the <TD> tag is:

where value is the number of rows or columns you want the cell to span. Spanning is always downward and to the right of the cell containing the ROWSPAN or COLSPAN properties. When you have a cell that spans several rows or columns you must adjust the number of <TD> tags on subsequent rows or columns.

In the following example of a table with spanning rows and columns, here is the code:

Which produces the following table:

Controlling Page Layout with Tables

Tables are often used to control the layout of an entire web page. For example, if you wanted to place a graphic on the far right side of a page and wanted text on the left, and on the same line, you'd need to use a table to control the layout. Here is a simple example of how you might use a table to place a logo on the right of text.

My Web Page

Notice that the table border is set to zero so that the table does not show. The table is simply used to align elements on the page.

You can also place tables inside of other tables, called nested tables. You will use nested tables to create the "Gargoyle Collection" web page in session 4.3 of tutorial 4. Your final page will look similar this:

Table Extensions

You can enhance the appearance of tables by specifying table border colors and using different frame values to control which table borders appear. Additional properties introduced in later versions of HTML extend the basic table tags. However, Netscape does not support the FRAME and RULE properties. As always, it is important to check your web page to see how it displays on different browsers versions and different operating systems.

By default, table borders appear two shades of gray, creating a three-dimensional effect. The syntax to change the border color is:

where color is either the color name or color value. Here is a table with BORDERCOLOR=RED and BORDER=10.

Table Frames

The FRAME property allows you to control which sides of the table will have borders. The syntax for the FRAME property is:

where value is one of the following choices:

• BOX (the default) - draws borders around all four sides
• ABOVE - draws only the top border
• BELOW - draws only the bottom border
• HSIDES - draws both the top and bottom borders (the horizontal sides)
• LHS - draws only the left borders
• RHS - draws only the right borders
• VSIDES - draws both the left and right borders (the vertical sides)
• VOID - does not draw borders on any of the four sides

Here is a sample of these values:

Table Rules

By default, borders are drawn around each cell in a table. The RULES property lets you control this by specifying how you want the table grid to be drawn. The syntax for the RULES property is:

where value is one of the following choices:

• ALL - causes all cell borders to be drawn
• ROWS - causes borders to be drawn around only the table rows
• COLS - causes borders to be drawn around only the table columns
• NONE - suppresses the display of any cell borders

Here is a sample of these values.