Back

Table Basics

Since tables were introduced by Netscape in 1995, they have revolutionized web development.  Although tables were originally designed for developers to present tabular data, developers quickly realized that they could now control the layout of elements on their pages.  Since table cells can contain any other HTML element, designers found that they could use tables to position anything they wanted anywhere they wanted.

Creating tables is a relatively straightforward process.  You simply define the parts of your tables then decide which elements fit inside those parts.  Be warned, however, that creating tables by hand can be painstaking.  This is truly a task better performed in a dedicated web editor such as Macromedia Dreamweaver, Adobe GoLive, or Microsoft FrontPage.  On the other hand, much like you've learned thus far, doing tables by hand the first few times will allow you to become familiar with the structure of the table specification.  So let's have at it!

Table Parts

In general, the <table> element contains four specific parts that can be customized:

The <caption> element specifies a description for the table much like the <title> element specifies for the page.

Table Headings label rows, columns, or both inside your table.  Use the <th> element to create headings

Table Cells are the actual squares that make up your table.  They can contain any HTML element

Table Data is the values in the table itself.  Table data, in conjunction with the headings make up your tables.

Building Tables

Building tables, as stated previously, is pretty straightforward.  The general process is to create your <table>...</table> element, add an optional <caption>...</caption> element, then specify each row using the <tr>..</tr> element.  The content of the <tr> element is a collection of table data elements, <td>...</td> that define the cells of the table.  You define the rows in the table on at a time starting at the top, then define the cells for the rows one at a time and working from left to right.  Here is an example of a simple table:

<table>
<caption>Simple Table</caption>
<tr>
<th>Column One</th>
<th>Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>Cell 1,1</td>
<td>Cell 1,2</td>
<td>Cell 1,3</td>
</tr>
<tr>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

Here's how it looks:

Notice that the caption appears above the table and is centered over the table.  Also notice that the headings are rendered with emphasis and are centered within the cells.  By default, the content of the <td> elements is aligned horizontally to the left.  The default vertical alignment is middle.  Let's illustrate vertical alignment.  Modify the above table to include more text in Cell1,1 by forcing a line break with the <br> element:

<table>
<caption>Simple Table</caption>
<tr>
<th>Column One</th>
<th>Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>Cell 1,1<br>
More Text</td>
<td>Cell 1,2</td>
<td>Cell 1,3</td>
</tr>
<tr>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

Here's how it looks:

Notice how the text in Cells 1,2 and 1,3 is now aligned in the middle of the cell vertically.  To position the contents of the cell, use the align and valign attributes.  The align attribute attribute takes one of the following values: left, right, center, or justify.  The default is left.  Justify is not guaranteed to work in all browsers.  The valign attribute takes one of the following: top, middle, or bottom.  The default is middle.  Let's demonstrate:

<table>
<caption>Simple Table</caption>
<tr>
<th>Column One</th>
<th>Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>Cell 1,1<br>
More Text</td>
<td valign="top">Cell 1,2</td>
<td align="center">Cell 1,3</td>
</tr>
<tr>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

Here's how it looks:

Notice that Cell 1,2 is aligned at the top of the cell and Cell 1,3 is aligned in the center of the cell.

Now let's demonstrate that the headings can be applied to the rows, not just the columns.  Modify the tags for Cells 1,1 and 2,1 so that they are <th> elements instead of <td> elements:

<table>
<caption>Simple Table</caption>
<tr>
<th>Column One</th>
<th>Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<th align="left">Cell 1,1<br>
More Text</th>
<td valign="top">Cell 1,2</td>
<td align="center">Cell 1,3</td>
</tr>
<tr>
<th align="left">Cell 2,1</th>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

Here's how that one looks:

Notice that we specified align="left" for our two new heading cells - that's what pushed the text over to the left of the cells.

Sizing Tables and Cells

The default width of a table is based on the contents of each cell added together.  You can specify the width of your tables using the width attribute. The width attribute can be set with either percents or pixels.  If you use pixels, you do not have to specify px as your unit measure as you do in CSS.  If you use percents, the width of the table is defined as the percentage of the container of the table - not necessarily of the window:

<table width="75%">
<caption>Simple Table</caption>
<tr>
<th>Column One</th>
<th>Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<th align="left">Cell 1,1<br>
More Text</th>
<td valign="top">Cell 1,2</td>
<td align="center">Cell 1,3</td>
</tr>
<tr>
<th align="left">Cell 2,1</th>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

Here's how our table looks now:

Notice that the cells of our table have grown to accommodate the width of the table.  The default behavior is to split the extra space up evenly between the cells.  The <table> element also has an align attribute with possible values of left, right, and center.  This allows you to position the table much as you would an image (i.e. it will float if left or right is specified):

<table width="75%" align="center">
<caption>Simple Table</caption>
<tr>
<th>Column One</th>
<th>Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<th align="left">Cell 1,1<br>
More Text</th>
<td valign="top">Cell 1,2</td>
<td align="center">Cell 1,3</td>
</tr>
<tr>
<th align="left">Cell 2,1</th>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

Here's or table now:

The <table> element has a border attribute that allows you to specify the width of the border in pixels:

<table width="75%" align="center" border="10">
<caption>Simple Table</caption>
<tr>
<th>Column One</th>
<th>Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<th align="left">Cell 1,1<br>
More Text</th>
<td valign="top">Cell 1,2</td>
<td align="center">Cell 1,3</td>
</tr>
<tr>
<th align="left">Cell 2,1</th>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

Notice that the border attribute only affects the outside of the table, not the space in between the cells.  To modify the space between the cells, use the cellspacing attribute:

<table width="75%" align="center" border="10" cellspacing="7">
<caption>Simple Table</caption>
<tr>
<th>Column One</th>
<th>Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<th align="left">Cell 1,1<br>
More Text</th>
<td valign="top">Cell 1,2</td>
<td align="center">Cell 1,3</td>
</tr>
<tr>
<th align="left">Cell 2,1</th>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

You may also specify the amount of space between the cells' content and the border by using the cellpadding attribute:

<table width="75%" align="center" border="10" cellspacing="7" cellpadding="4">
<caption>Simple Table</caption>
<tr>
<th>Column One</th>
<th>Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<th align="left">Cell 1,1<br>
More Text</th>
<td valign="top">Cell 1,2</td>
<td align="center">Cell 1,3</td>
</tr>
<tr>
<th align="left">Cell 2,1</th>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

Notice that the content of the cells has moved away from the edges of the cells.  You are free to define the widths of your columns as well inside a table.  Usually you will do this inside the first row of your table as the following cells will default to the width of the row above.  Note that the width attribute of the <th> and <td> elements is derived from the width of the container if you use percents.  If you use pixels, this is not an issue:

<table width="75%" align="center" border="10" cellspacing="7" cellpadding="4">
<caption>Simple Table</caption>
<tr>
<th width="50%">Column One</th>
<th>Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<th align="left">Cell 1,1<br>
More Text</th>
<td valign="top">Cell 1,2</td>
<td align="center">Cell 1,3</td>
</tr>
<tr>
<th align="left">Cell 2,1</th>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

Notice that the widths of columns two and three have changed to accommodate the width of column one.  Column three is still larger than column two because its content is wider.  You can specify the width of all of the columns in your table using a combination of percents and pixels.  Usually, however, you will not specify the width of the final column in your tables.  This forces the final column to "soak up" the remaining space in the table:

<table width="75%" align="center" border="10" cellspacing="7" cellpadding="4">
<caption>Simple Table</caption>
<tr>
<th width="75">Column One</th>
<th width="50%">Colume Two</th>
<th>Column Three</th>
</tr>
<tr>
<th align="left">Cell 1,1<br>
More Text</th>
<td valign="top">Cell 1,2</td>
<td align="center">Cell 1,3</td>
</tr>
<tr>
<th align="left">Cell 2,1</th>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</table>

Those are the basics of creating tables in HTML.  You can see that there are many possibilities for presenting tabular data.  In the next lesson, we'll explore using tables for layouts and to present other HTML elements.