Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Quick Reference Sheets for Webmasters

Quick Reference sheets are packed full of useful information for all webmasters.

HTML Reference Sheet

Using Tables

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.

Each table may have an associated caption (see the CAPTION element) that provides a short description of the table's purpose. A longer description may also be provided (via the summary attribute) for the benefit of people using speech or Braille-based browsers.

Table rows may be grouped into a head, foot, and body sections, (via the THEAD, TFOOT and TBODY elements, respectively). Row groups convey additional structural information and may be rendered by user agents in ways that emphasize this structure. User agents may exploit the head/body/foot division to support scrolling of body sections independently of the head and foot sections. When long tables are printed, the head and foot information may be repeated on each page that contains table data.

Table cells may either contain "header" information (see the TH element) or "data" (see the TD element). Cells may span multiple rows and columns. The HTML 4 table model allows authors to label each cell so that non-visual user agents may more easily communicate heading information about the cell to the user. Not only do these mechanisms greatly assist users with visual disabilities, they make it possible for multi-modal wireless browsers with limited display capabilities (e.g., Web-enabled pagers and phones) to handle tables.

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Here's a simple table that illustrates some of the features of the HTML table model. The following table definition:

<table border="1"
summary="This table gives some statistics about fruit
flies: average height and weight, and percentage
with red eyes (for both males and females).">
<caption><em>A test table with merged cells</em></caption>
<tr>
<th rowspan="2"></th>
<th colspan="2">Average</th>
<th rowspan="2">Red<br>eyes</th>
</tr>
<tr>
<th>height</th>
<th>weight</th>
</tr>
<tr>
<th>Males</th>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<th>Females</th>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</table>

This renders as follows:

A test table with merged cells
Average Red
eyes
height weight
Males 1.9 0.003 40%
Females 1.7 0.002 43%

We will get into greater detail about tables in the HTML Tag List.