HTML Advanced Topics: Tables

Tables are an excellent way to organize information on a webpage. Many designers use tables instead of frames because they are more cross-browser friendly. That being said most beginners find table organization a challenge. Some of the coding involved in table creation can be somewhat counterintuitive.

Before sitting down to create a table on the computer it is best to have a very specific idea about what you want your table to look like. How much space will it take up on your page? How many rows and columns will your table have? Will your table be the same color as your page? Will it have a background picture? Which lines within the table do you want showing? Is the table an element of the page or is it a hidden feature you are using for on-screen organization?

Don't worry if you cannot answer all of these questions the first time. Because tables can be very simple or very complicated we will start and the bottom and work our way toward a complex table. You will find that at this point having a good HTML editor can save you a lot of of heartache, as good editors take all of the complexity out of designing a table.

Introduction to Tables

We will start with a single column table with five rows and a table header. On the left in the box is the code used to create the output on the right.

The HTML	The Output to the Screen
<table border="1"> <th>Here is the title of my Table</th> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> <tr><td>Row 3</td></tr> <tr><td>Row 4</td></tr> <tr><td>Row 5</td></tr> </table>	Here is the title of my Table Row 1 Row 2 Row 3 Row 4 Row 5

Tables have three basic components. Table headers <th> create a special cell for creating a label for a column. Table rows <tr> organize data horizontally. Table cells <td> hold the actual data.

Notice the hierarchy in the above code. The <table> tags surround all of the other tags. The table row tags <tr> surround the table data <td> tags. Because we only wanted one column of data each table row only holds one data cell.

Now lets create a table that has two columns and five rows.

Row 1, Left	Row 1, Right
Row 2, Left	Row 2, Right
Row 3, Left	Row 3, Right
Row 4, Left	Row 4, Right
Row 5, Left	Row 5, Right

Here is the code used to create the above table:

<table border="1">
<tr>
    <td>Row 1, Left</td>
    <td>Row 1, Right</td>
</tr>
<tr>
    <td>Row 2, Left</td>
    <td>Row 2, Right</td>
</tr>
<tr>
    <td>Row 3, Left</td>
    <td>Row 3, Right</td>
</tr>
<tr>
    <td>Row 4, Left</td>
    <td>Row 4, Right</td>
</tr>
<tr>
    <td>Row 5, Left</td>
    <td>Row 5, Right</td>
</tr>
</table>

Look at the hierarchy in this table. Now each table row tag holds two data cells. HTML table store data in rows, so if you have two columns of data to enter you must jump back and forth between them as you enter the data. This is what I meant when I said table data entry is somewhat counter intuitive. Many beginners find it easier to create the table add enter all of the tags, leaving them empty save for numbering each cell. In very complex tables this method can be very helpful.

Adding Lines

Tables have many options for adding lines. Three attributes control the distribution and width of the lines these are: border, frame, and rules.

Border controls the width of the line. You might have noticed in the above code I set the border equal to 1. By doing this without entering any information for the frame or rules attributes I ended up with all possible lines, set to one pixel wide, showing in my table. Even if you don't ultimately want lines in your table, while you are building the table it is helpful to have the lines showing.

Frame controls the addition of vertical lines to the table. There are several options available for the frame attribute:

above:	places one line on the top line of the table
below:	places one line on the bottom line of the table
box:  	places lines on all sides of the table
hsides: places lines on the horizontal sides of the table
vsides: places lines on the vertical sides of the table
lhs: 	places one line on the left side of the table
rhs: 	places one line on the right side of the table
void: 	removes lines from all sides of the table

The rules attribute adds lines to the inside of the table. There are a few options available for the rules attribute:

all:	show all internal lines
cols:	show all internal column lines
rows:	show all horizontal row lines
none:	do not show any of the internal lines

A Few More Attributes

Like many of the other HTML tags, the table tag allows you to use the align (left, center, or right) attribute. <table align="right">

There are two tags that allow you to determine the amount of space around the data in the cells and within the cells themselves. Cellspacing adds more space with in the cells and cellpadding adds space around the cells, themselves.

This is the syntax for adding these attributes:
<table cellspacing="2" cellpadding="2" border="1">

Below is a graphic illustration of what each of the attributes do separately and if you use both of them together.

Cellpadding One Two Three four five six

Cellspacing One Two Three four five six

Both One Two Three four five six

These colspan and rowspan attributes are VERY important attributes for customizing tables. Colspan allows you to combine two or more cells into a single cell, so that the data covers two or more columns. The rowspan attribute allows you to combine two or more rows into one cell, so that the data covers two or more rows. The colspan and rowspan attributes are always used within the table data <td> tags.

The "Table Title" covers two columns by using the colspan attribute within the table header tag.

<table cellspacing="6" border="1" align="center">
<th colspan="3">Table Title</th>
<tr>
	<td>One</td>
	<td>Two</td>
	<td>Three</td>
</tr>
<tr>
	<td>four</td>
	<td>five</td>
	<td>six</td>
</tr>
</table>

The <caption> tag places a caption centered above the table

In summary here are is an example that uses some of these special attributes, with its source code beneath it.

My Table

Row 1, Left	Row 1, Middle	Row 1, Right
Row 2, Left	Row 2, Middle	Row 2, Right
Row 3, Left	Row 3, Middle	Row 3, Right

Here is the code used to create the above table:

<table align="center" cellspacing="2" cellpadding="2"
 border="1" frame="hsides" rules="cols">
<caption>My Table</caption>
<tr>
    <td>Row 1, Left</td>
    <td>Row 1, Middle</td>
	<td>Row 1, Right</td>
</tr>
<tr>
    <td>Row 2, Left</td>
	<td>Row 1, Middle</td>
    <td>Row 2, Right</td>
</tr>
<tr>
    <td>Row 3, Left</td>
	<td>Row 1, Middle</td>
    <td>Row 3, Right</td>
</tr>
</table>

This work is licensed under a Creative Commons License.