Organize data with HTML tables

Tony Patton gets back to basics with this examination of the many features of the HTML TABLE element. He discusses some HTML table syntax features that are not as widely known, and explores what you need to consider when developing for non-standard browsers.

Every Web developer is familiar with the edict of avoiding tables for page layout, but some take this too far and completely ignore tables. The original purpose of HTML tables is for marking up tabular data. This week, I'm going back to basics and examining the many features of the HTML TABLE element.

Organizing data

While you're likely familiar with the basic HTML table syntax, there are some features that are not as widely known. The next code listing shows a basic table with headers and data in each table cell.

<html>
<head><title>HTML Table</title></head>
<body>
<table>
<tr>
<th>Team</th>
<th>Score</th>
</tr>
<tr>
<td>Colts</td>
<td>29</td>
</tr>
<tr>
<td>Bears</td>
<td>17</td>
</tr>
</table></body></html>

The sample table features the basic TABLE element with three rows (TR element) and two cells in each row. The first row uses table header elements (TH) for header cells.

Although the first example includes the standard table elements, there are many more elements that may be used. The CAPTION element may be used to provide a short description of a table. By default, most browsers render it centered above the table.

Three elements that allow you to specify the different parts of a table are THEAD, TBODY, and TFOOT. You can use these elements to define row groups within the table structure with THEAD defining the header portion of the table (note that THEAD must appear before any body sections). TBODY defines the body of the table, and TFOOT defines the footer portion. If used, each element must contain at least one row. The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The following code shows how the previous example is rewritten using these elements.

<html>
<head><title>HTML Table</title></head>
<body><table>
<caption>Super Bowl XLI</caption>
<thead>
<tr>
<th>Team</th>
<th>Score</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Colts Win</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Colts</td>
<td>29</td>
</tr>
<tr>
<td>Bears</td>
<td>17</td>
</tr>
</tbody>
</table></body></html>

You'll notice the cell within the TFOOT element spans two columns with the colspan attribute of the TD element. Also, you can span rows with the rowspan attribute of the TR element. Speaking of attributes, the base TABLE element has various attributes that may be utilized. The following list outlines some of these attributes:

  • summary: Provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille.
  • align: Deprecated with HTML 4, but its purpose was specifying the position of the table with respect to the document (left, center, right).
  • width: Specifies the desired width of the entire table.
  • border: Specifies the width (in pixels) of the frame around a table.
  • cellspacing: Specifies how much space the user agent should leave between the left side of the table and the left-hand side of the leftmost column, the top of the table, the top side of the topmost row, and so on for the right and bottom of the table. The attribute also specifies the amount of space to leave between cells.
  • cellpadding: Specifies the amount of space between the border of the cell and its contents. If the value of this attribute is a pixel length, all four margins should be this distance from the contents. If the value of the attribute is a percentage length, you should equally separate the top and bottom margins from the content based on a percentage of the available vertical space. Also, you should equally separate the left and right margins from the content based on a percentage of the available horizontal space.

CSS is another option instead of using the align, width, border, cellspacing, and cellpadding attributes, but that is your decision. One attribute not listed that is worth mentioning is the id attribute. You can use it to assign unique names to individual elements, which may come in handy when you're accessing elements programmatically. In addition, the summary attribute is just one of the many features available related to accessibility.

Non-standard browsers

Sometimes when Web developers are short on time, they overlook accessibility features. However, the number of individuals using non-standard browsers (e.g., screen readers for the visually impaired) is growing. HTML tables provide various ways to interact with these users as the summary attribute of the TABLE element demonstrates.

In addition, screen readers announce data cell headers within a page, but these headers can be long. In these situations, you can use the abbr attribute of the TD element to provide a shortened version of the cell header to limit what has to be relayed to the user.

Also, the scope attribute defines whether a header cell provides header information for a column or a row. Its possible values are col and row; col details its header information for the column it is in, and row designates its information for the row it is in. This comes in handy when there are header labels for both columns and rows in a table. The scope attribute lets screen readers know the relationship between headers and cells.

Another technique for assigning cells to headers is through the use of the header attribute. It begins with assigning each header a unique id. Next, a headers attribute is then added to each cell. This attribute contains a list, separated by spaces, of the id of every header cell that applies to that cell.

The example code is further enhanced to use these attributes to support non-standard browsers. Also, a border is added to the table along with the spacing and padding of the cells.

<html>
<head><title>HTML Table</title></head>
<body>
<table
summary="Sample table for TechRepublic.com"
cellpadding="5"
cellspacing="5"
border="1">
<caption>Super Bowl XLI</caption>
<thead>
<tr>
<th abbr="team" scope="col">Team</th>
<th abbr="score" scope="col">Score</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Colts Win</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Colts</td>
<td>29</td>
</tr>
<tr>
<td>Bears</td>
<td>17</td>
</tr>
</tbody>
</table></body></html>

Plenty of options

While using HTML tables for page layout is frowned upon (even though developers still use them), you can still use tables to present tabular data. For a more thorough overview of the options for table formatting, try perusing the HTML standard online. Next week I'll go a step further by formatting tables with CSS. In the meantime, check out one of my previous articles, which focuses on using both tables and CSS for page layout.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Keep your developer skills sharp by automatically signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.