The Unofficial Web Site for the Tucson Computer Society Internet SIG

June 2005
Anatomy of an HTML Table

Working with tables is a great way to gain an understanding of what the ‘ box model’, the heart of Cascading Style Sheets, is all about. Just remember, the current standard suggests that tables be used for displaying data and that styles should be used for positioning and formatting page elements. So, what did we just do? We created a grid for laying out text and pictures. We specified 750 pixels since we want to design for the most common monitor resolution used by our potential visitor. The cell padding creates a space between the cell content and the cell edge. The cell spacing is the space between the outside edges of the cells. We combined the two rows in the left column into one and reduced the width of that column. We then typed in some text for creating navigation links between our pages. And inserted line breaks between the navigation terms in the editor with the Enter key.

A table is a container for all kinds of stuff. It consists of the table container and table cells, created by defining rows and cells within those rows. The actual data goes in the cells. By manipulating the space between the data and the cell edge, the space between the cells and the border design, you can achieve some striking effects. Tables, but not cells, can have margins defined, the space around the outside of the table. Cells, but not tables, can have padding defined, the space between the cell content and cell edge. The current recommendation by the W3C is that tables be used for displaying data and not as a layout tool. Here’s some code for a 2-cell table displaying the formula 1+1 = 2 that would look something like this:

The formula

 1+1 = 2


<table style="text-align: left; width: 218px; height: 50px;"
title="my data" summary="a table for displaying data"
<tbody>
<tr>
<td style="width: 135px;">The formula</td>
<td style="width: 98px;">&nbsp;1+1 = 2</td>
</tr>
</tbody>
</table>

The <table> tag indicates the start of a table. Within the tag are attributes with values enclosed in quotes that define characteristics for the table. The <tbody> tag says that the table body starts here. You could have an optional set of <caption> tags between the <table> and <tbody> tags. <tr> indicates the beginning of a table row. <td> is the start tag for a table cell. These td tags each include the width attribute and have a value of 100 pixels. The characters &nbs; (called an entity), are HTML code for inserting a non-breaking space into your text. HTML normally ignores extra white space in your document. The tags are all closed to indicate the end of a data cell, end of a table row, end of the table body and end of the table.

HTML/XHTML Tag Resources

HTML 4.01 Tag Reference

http://www.w3schools.com/html/html_reference.asp
Another HTML 4.01 Tag Reference http://www.webreference.com/html/reference/specs/

Library of Congress Guidelines for HTML 4.01

http://www.loc.gov/iug/html40/40tags.html

...back to Baseball Statistics on the Web!