Tables

4.1 Simple Tables

Tables are created using three tags: <table>, <tr> and <td>.

• You must open and close a table with <table> and </table>.
• <tr> and </tr> tags signify the start and end of a table row.
• <td> and </td> tags signify the start and end of a table data cell.
• <th> and <caption> are tags used to format specific areas of a table.

Here's an example of coding and the result: (view source)

The <th> table header tag can be used in place of any <td> tag. This applies bold and centering to the cell. To add a caption to the top of a table, use a <caption> tag after the header. You should also subdivide the sections of the table using <thead>,<tfoot> and <tbody> tags.

4.2 Table Formatting

There are several parameters which can be used to adjust the overall appearance of a table. The parameters border, cellspacing and cellpadding control the width of the border, the space between cells and the padding around the inside of each cell. Specify the number of pixels for each parameter: (view source)

Using the align parameter within the <table> tag has the same effect as if the table is an image. (See the image alignment section)

Alignment for individual cells can be done using align and valign (vertical align) parameters.
Unfortunately, you are required to specify alignment for each cell individually. Your best bet is to use cut and paste to get your tags set up quickly. This table shows parameters that you can use: (view source)

The table will automatically adjust to the size of the content in the cells. Alternately, the table's height and width properties can be set explicitly. You may specify the value in pixels or as a percentage of the browser window width in the format <table width="0-100%">

The bgcolor property can be set with the <table> tag, the <tr> tag or the <td> tag: (view source)

Bordercolor, frame and rules parameters can also be used to tweak the appearance of a table: (view source)

4.3 Formatting Pages

Tables can be used for far more than formatting a grid of information. Tables can be used to format an entire web page. Think of your web page as a newspaper page. It can be organized into rows, columns and cells exactly the way that you would like.

Before your can format a page, you need to be able to use the colspan and rowspan parameters. These parameters indicate that a cell will span more than one column or row. With these tools you can set up a table in any pattern you like: (view source)

Another concept that is important to understand is nesting tables within tables. A web page may be thought of as a simple table, with more complicated tables within it.

When using tables to organize a page, be sure to use comment lines and spacing to separate the sections of your code. Otherwise it will be difficult to locate the various areas of your page.