Creating a Basic Table

The TABLE element was initially proposed as part of the failed HTML 3.0 initiative, before being included in standard HTML as part of HTML 3.2. The TABLE element is a container element that brackets all data to be included in a table. Delete the start and end tags for the PRE element you added earlier and bracket the data with a TABLE element (don't try to check this out in your browser yet):

<pre>
<table>
Alberts,     $160,251,     $245,600,     $132,000,     $537,851

Brown,       225,255,      115,995,      132,875,      474,125

Gilbertson,  240,168,      390,295,      175,000,      805,463

Sikorsky,    100,678,      185,343,      260,825,      546,846

Yang,        265,015,      333,838,      148,345,      747,198

Totals,      $991,367,     $1,271,071,   $849,045,     $3,111,483
</table>
</pre>

Defining Rows and Columns

A table is arranged in a grid of rows and columns. Tables can be as simple as a single-cell table (with one row and one column, in other words) or they can contain as many rows and columns as you care to define.

Defining Table Rows

The TR (Table Row) element specifies that nested data is included in a table row. Eliminate the spaces between the table rows and then bracket each row within a TR element:

<table>
<tr>Alberts    $160,251   $245,600    $132,000   $537,851</tr>
<tr>Brown      225,255    115,995     132,875    474,125</tr>
<tr>Gilbertson 240,168    390,295     175,000    805,463</tr>
<tr>Sikorsky   100,678    185,343     260,825    546,846</tr>
<tr>Yang       265,015    333,838     148,345    747,198</tr>
<tr>Totals     $991,367   $1,271,071  $849,045   $3,111,483</tr>
</table>

Defining Table Columns

The TD (Table Data) element defines the table cells (or columns) within a table. Bracket the data for each table cell with a TD element and eliminate all but one space between the cells (see Figure 5.3):

<table>
<tr><td>Alberts</td> <td>$160,251</td> <td>$245,600</td>
<td>$132,000</td> <td>$537,851</td></tr>
<tr><td>Brown</td> <td>225,255</td> <td>115,995</td>
<td>132,875</td> <td>474,125</td></tr>
<tr><td>Gilbertson</td> <td>240,168</td> <td>390,295</td>
<td>175,000</td> <td>805,463</td></tr>
<tr><td>Sikorsky</td> <td>100,678</td> <td>185,343</td>
<td>260,825</td> <td>546,846</td></tr>
<tr><td>Yang</td> <td>265,015</td> <td>333,838</td>
<td>148,345</td> <td>747,198</td></tr>
<tr><td>Totals</td> <td>$991,367</td> <td>$1,271,071</td>
<td>$849,045</td> <td>$3,111,483</td></tr>
</table>

Figure 5.3: A table is composed of rows and columns.

Adding and Controlling Borders

Adding a border to the table can help distinguish the data cells and make the table more readable. Use the BORDER attribute in the TABLE element to set a one-pixel border for the table (see Figure 5.4):

<table border="1">
<tr><td>Alberts</td> <td>$160,251</td> <td>$245,600</td>
<td>$132,000</td> <td>$537,851</td></tr>

Figure 5.4: A one-pixel border is added to the page.

Increasing the value of the BORDER attribute increases the thickness of the outer border of the table, displaying it in 3D relief; however, it doesn't affect the appearance of the interior lines of the table. Increase the size of the border to 6 pixels (see Figure 5.5):

<table border="6">

Figure 5.5: The border around the table is increased to 6 pixels, while the borders between the data cells remain unchanged at a single pixel.

Setting Spacing and Padding

The CELLSPACING attribute adds space between cells, whereas the CELLPADDING attribute adds space within each cell. Add six pixels of spacing and padding to the table (see Figure 5.6):

<table border="6" cellspacing="6" cellpadding="6">

Figure 5.6: Spacing is added between the cells and padding within the cells.

Adding Column Headings

The TH (Table Heading) element can be used to create column headings for a table. The TH element works the same as the TD element, except that nested text is bolded and centered. Add a row of column headings to the table (see Figure 5.7):

<table border="6" cellspacing="6" cellpadding="6">
<tr><th></th> <th>Jan</th> <th>Feb</th> <th>Mar</th>

<th>Totals</th></tr>

Figure 5.7: Table headings are automatically bolded and centered.

Centering the Table

Use the ALIGN attribute to center the TABLE element (see Figure 5.8):

<table align="center" border="6" cellspacing="6" cell-
padding="6">

Figure 5.8: You can center a table by inserting the align= "center" attribute in the TABLE element.

Although the TABLE element is classified as a block element, it doesn't behave like a block element in every respect. Using align="left" or align="right" in the TABLE element causes the table to float on the left or right margin, with following text, elements, or even other tables to flow around the right or left side of the table. A floating table, in other words, operates similarly to a floating image, even though the TABLE element is a block element and the IMG element is an inline element.

Adding Space above and below a Table

You may have noticed that there is an empty PRE element inserted in the example file, following the example table you have created and preceding the page's address block. This is because no vertical space is added above or below a table. Inserting the PRE element below the table containing a single hard return is valid in HTML 4.01 and adds the desired spacing below the table. Alternatively, you can also use a style to add margin spacing below a table (working with styles is covered in the Sunday Afternoon session).

Setting the Table Width

The TABLE element's WIDTH attribute can specify a width for the table, set either in pixels or as a percentage value. A percentage value sets the width of the table to a percentage of the available horizontal space within the browser's viewport—the amount of available horizontal space will vary along with the width of the browser. Specify a table width of 75 percent (see Figure 5.9):

<table align="center" border="6" cellspacing="6" cell-
padding="6" width="75%">

Figure 5.9: You can set the width of a table to a percentage (here 75 percent) of a browser window.

Adding Row Headings

The TH element can also be used to add row headings to the table. To create row headings for the table, change the first TD element in each row into a TH cell (see Figure 5.10):

<table align="center" border="6" cellspacing="6"
cellpadding="6" width="75%">
<tr><th></th> <th>Jan</th> <th>Feb</th> <th>Mar</th>
<th>Totals</th></tr>
<tr><th>Alberts</th> <td>$160,251</td> <td>$245,600</td>
<td>$132,000</td> <td>$537,851</td></tr>
<tr><th>Brown</th> <td>225,255</td> <td>115,995</td>
<td>132,875</td> <td>474,125</td></tr>
<tr><th>Gilbertson</th> <td>240,168</td> <td>390,295</td>
<td>175,000</td> <td>805,463</td></tr>
<tr><th>Sikorsky</th> <td>100,678</td> <td>185,343</td>
<td>260,825</td> <td>546,846</td></tr>
<tr><th>Yang</th> <td>265,015</td> <td>333,838</td>
<td>148,345</td> <td>747,198</td></tr>
<tr><th>Totals</th> <td>$991,367</td> <td>$1,271,071</td>
<td>$849,045</td> <td>$3,111,483</td></tr>
</table>

Figure 5.10: You can also add row headings to a table.

You'll notice when you view this in your browser that row headings are centered and bolded by default, just like the column headings you created previously. That's because you're using the same element (TH) to serve two different purposes (creating column and row headings). In the next section, you'll set the row headings to be left-aligned, rather than centered.

In most browsers, when you include an empty TD or TH cell in a table, the cell borders for the empty cell aren't drawn (see the upper-left table cell in Figure 5.10, for instance). In the current example, this is a desirable effect, but if the empty cell were in the middle of your table, you'd probably want to have the cell border drawn. For a workaround that forces the cell borders to be drawn, insert a non-breaking space (  or  ) within the empty table cell.

Horizontally Aligning Rows and Cells

You can use the ALIGN attribute in the TR, TD, and TH elements to horizontally align the contents of table rows and cells.

Horizontally Aligning Table Rows

By default, the content of table cells is left-aligned. Use the ALIGN attribute to right-align the content of all cells within each table row (see Figure 5.11):

<table align="center" border="6" cellspacing="6"
cellpadding="6" width="75%">
<tr><th></th> <th>Jan</th> <th>Feb</th> <th>Mar</th>
<th>Totals</th></tr>
<tr align="right"><th>Alberts</th> <td>$160,251</td>
<td>$245,600</td> <td>$132,000</td> <td>$537,851</td></tr>
<tr align="right"><th>Brown</th> <td>225,255</td>
<td>115,995</td> <td>132,875</td> <td>474,125</td></tr>
<tr align="right"><th>Gilbertson</th> <td>240,168</td>
<td>390,295</td> <td>175,000</td> <td>805,463</td></tr>
<tr align="right"><th>Sikorsky</th> <td>100,678</td>
<td>185,343</td> <td>260,825</td> <td>546,846</td></tr>
<tr align="right"><th>Yang</th> <td>265,015</td>
<td>333,838</td> <td>148,345</td> <td>747,198</td></tr>
<tr align="right"><th>Totals</th> <td>$991,367</td>
<td>$1,271,071</td> <td>$849,045</td> <td>$3,111,483</td></tr>
</table>

Figure 5.11: The content of the table rows is right-aligned.

Horizontally Aligning Table Cells

You can use the ALIGN attribute to horizontally align the content of individual TD or TH elements. Use the ALIGN attribute in the TH elements at the start of the rows to left-align the row headings (see Figure 5.12):

<table align="center" border="6" cellspacing="6"
cellpadding="6" width="75%">
<tr><th></th> <th>Jan</th> <th>Feb</th> <th>Mar</th>
<th>Totals</th></tr>
<tr align="right"><th align="left">Alberts</th>
<td>$160,251</td> <td>$245,600</td> <td>$132,000</td>
<td>$537,851</td></tr>
<tr align="right"><th align="left">Brown</th> <td>225,255</td>
<td>115,995</td> <td>132,875</td> <td>474,125</td></tr>
<tr align="right"><th align="left">Gilbertson</th>
<td>240,168</td> <td>390,295</td> <td>175,000</td>
<td>805,463</td></tr>
<tr align="right"><th align="left">Sikorsky</th>
<td>100,678</td> <td>185,343</td> <td>260,825</td>
<td>546,846</td></tr>
<tr align="right"><th align="left">Yang</th> <td>265,015</td>
<td>333,838</td> <td>148,345</td> <td>747,198</td></tr>
<tr align="right"><th align="left">Totals</th>
<td>$991,367</td> <td>$1,271,071</td> <td>$849,045</td>
<td>$3,111,483</td></tr>

</table>

Figure 5.12: The row headings are left-aligned.