WebsiteBytes.com Web Design Guide: Tutorials

Tables are one of the most useful features used in Web design. Besides displaying tabulated data, tables can be used to precisely position content on a website.

The Table Design Process

Tables use more than one element. To begin with, use the <table> and </table> elements. These tell the Web browser where the table starts and ends. Most Web browsers do not show the borders of a table. If you want to show them, use the border= attribute along with a width value. Using this attribute will make it easier when you start learning how to use tables. You can always remove it later once your table is complete.

Tables consist of rows and columns. These are defined using the elements <tr> and <td> elements respectively. Cells are the areas formed where rows and columns meet and are where the table's data goes.

When you begin to create the layout of a table, it is easiest to create a row, and then divide that row into columns. The following example shows a one row table divided into three columns:

<table> <tr> <td></td> <td></td> <td></td> </tr> </table>

The table's data for each cell can then be placed between the appropriate <td> and </td> elements.

More rows can be added by repeating the previous steps (ie: inserting more <tr> and </tr> elements along with the corresponding <td> and </td> elements).

You can also create headers (labels for each column) for the table. To do this, use the <th> and </th> elements. For example:

<tr> <th>First Header</th> <th>Second Header</th> <th>Third Header</th> </tr>

You can easily insert tables using BestAddress by choosing Table from the Insert menu.

Spanning Multiple Rows or Columns

Sometimes it is necessary to have a single cell span (or take up more than one) cell's space. To do this, use the colspan= attribute with a value of the number of columns you want to span if you want to span columns or the rowspan= attribute if you want to span multiple rows. The following example demonstrates this:

<html> <head> <title>Cell Spanning Example</title> </head> <body> <table border=1> <tr> <td colspan=2>This cell spans two columns</td> <td>While this one doesn't</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table>
</body> </html>

When previewed in a Web browser, the above example will look something like this:

Vertical Alignment

Text displayed in the table is vertically aligned in the middle. If one of the table's cells however contains a large amount of text and the other's don't, the table will resize to meet the requirements of the largest cell. The text in all other cells will align in the middle of the cell, leaving large gaps above and below. If you want to align all a cell's text at a certain position, you can use the valign= attribute in both the column (<td>) or header (<th>) elements. Attribute values include top, middle or bottom.

Other Attributes

Tables support a wide range of other attributes. See the Online HTML Reference for a full list of these along with a description.

Aligning Document Content with Tables

It is difficult to position the content of a webpage accurately. To overcome this problem, many website designs use tables to assist in the layout of the webpage. Because tables are able to contain most of the same things as you can put into the webpage itself, using a table with its border set to 0 allows you to accurately position content.

Where to from here?

Get yourself prepared for publishing your own website in Chapter 10: Creating a Website.