HTML Tables

HTML Tables (see HTML4.01 specs) provide a robust way of organizing information into columns. Unfortunately, they are now considered a no-no for an overall grid-style page layout, although the substitutes are barely adequate.

This document discusses the basic features of tables: the elements and attributes. Keep in mind that other than the rowspan and colspan, which have not CSS correlates, all other table attributes should ultimately not be used, favoring their replacment by style rules. Namely, focus on the last section when you want to create the table's appearance.

Basic elements: table, tr, td, th

The most basic HTML elements needed are table, tr (table row) and td (table data). In addition, the th (table header) element is used like the td element with different default style settings. For example, this is a simple table using these basic elements.
<table>
 
<tr>
<th>1990</th> <th>2000</th> <th>revenue<br />type</th>
</tr>
 
<tr> 
<td>5.31</td> <td>4.2</td> 
<td>percent increase</td>
</tr>
 
<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>
hardware<br />and<br />software
</td>
</tr>
 
</table>
select
Here is how it is rendered:
1990 2000 revenue
type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software
A table consists of cells displayed horizontally between the <tr> </tr> tags. The td and th cells have the same function — the difference is their different default style features: The attributes specific to the table element are these (see the HTML4.01 table specs):

Row and cell attributes

The cell elements td and th elements have these attributes (see HTML4.01 td & th specs): Setting the width of an individual cell has the effect of setting the width of the entire column. Its usage is technically deprecated but it is still very common in practice. The tr attributes are align and valign (see HTML 4.01 tr specs) which apply the values to all the cells within the row.

Additionally cell and row elements support these attributes related to providing tabular information in alternative modalities, such as speech synthesis.

Using these, the user may be able to query the contents of the table to discover specific information.

Row groups: the tbody, thead, tfoot elements.

The elements thead, tbody and tfoot are used to create logically separate row groups. See the (relevant HTML4.01 specs). Their attributes are the same as the tr attributes but they provide a more convenient way to apply a set of attributes to a group of rows at a time. Furthermore, the table lines can be specified to respect the groups.

The thead and tfoot groups are meant to function so that whatever rows are put into them go to the top and bottom of the table, respectively. However, I wouldn't count on this actually working. In fact, you really only need the tbody element since it can be used whenever you want to create a row group.

It is implicit in HTML that all rows are actually within a group. Ungrouped rows are assumed to belong to a tbody element. E.g., our initial example is, in fact, treated internally as if we had used this code:
<table>
<tbody>
<tr>
<th>1990</th> <th>2000</th> <th>revenue<br />type</th>
</tr>
 
<tr> 
<td>5.31</td> <td>4.2</td> 
<td>percent increase</td>
</tr>
 
<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>
hardware<br />and<br />software
</td>
</tr>
</tbody>
</table>
select

Spanning multiple cells: colspan & rowspan

We can effectively make style replacements for every table, row or cell attribute except for the colspan and rowspan attributes. Choosing an attribute value > 1 allows a cell to cover more than one column or row, respectively. Use our running example above. For simplicity of revealing the cells, we will set the border attribute to the value 1. Consider this modification:
<table border="1">
<tr>
<th>1990</th> <th>2000</th> <th>revenue<br />type</th>
</tr>
 
<tr> 
<td colspan="2">5.31</td> 
<td>percent increase</td>
</tr>
 
<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>
hardware<br />and<br />software
</td>
</tr>
</table>
select
Here is how it is rendered:
1990 2000 revenue
type
5.31 percent increase
$30,333 $46,576 hardware
and
software

We are trying to convey the information that the number "5.31" applies to both years instead of repeating it. Whenever a colspan > 1 is used, we simply reduce the number of cells within a row appropriately.

Likewise, the rowspan attribute, when set to a number > 1 means that the cell covers that one in the row where it is declared and the row below it. This is a bit trickier to use, because you have to take away a cell in the next row! Here is an example:
<table border="1">
<tr>
<th>1990</th> <th>2000</th> <th>revenue<br />type</th>
</tr>
 
<tr> 
<td>5.31</td> <td rowspan="2">?</td> 
<td>percent increase</td>
</tr>
 
<tr>
<td>$30,333</td> 
<td>
hardware<br />and<br />software
</td>
</tr>
</table>
select
Here is how it is rendered:
1990 2000 revenue
type
5.31 ? percent increase
$30,333 hardware
and
software
We are trying to convey the information that the data for the year 2000 is completely unknown. Both span cells should have the text centered to create the correct appearance, but we want to avoid using the align attribute to do so, hence, we'll leave it at this for now.

The colgroup and col elements.

The colgroup and col elements allow us to specify information about entire columns or groups of columns (see HTML4.01 colgroup and col specs). Both of these elements have these attributes: When used, these elements are placed right after the table start tag. In particular, the width attribute, used in td or th elements, is more correctly used in col or colgroup elements, since the width of a single cell really affects the width of the entire column.

Unfortunately, the col and colgroup elements may not work uniformly across all browsers, and thus setting the width in table cell elements, although deprecated, often creates more portable HTML code.

Table-related style properties

As mentione above, style properties can be used apply to tables and replace almost all of the the table attributes. For example:

Example1

Modify example table using an id attribute
<table id="style1">
and then apply these style rules:
#style1 {
  border-spacing: 15px 5px;
  border: solid 1px blue;
}
#style1 th {
  text-align: right;
  border: solid 1px red;
}
#style1 td {
  padding: 5px 20px;
  vertical-align: bottom;
  border: solid 1px red;
}
to achieve this effect:
1990 2000 revenue
type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

Example2

The first-child pseudo-selector can identify the first row or first column. The nth-child(N) also works, but not on IE8 or below. Modify example table using an id attribute
<table id="style2">
and then apply these style rules:
#style2 {
  border-spacing: 3px;
  border: solid 1px gray;
}
#style2 th, 
#style2 td {
  border: solid 1px gray;
  padding: 5px;
}
#style2 tr:first-child {
  background: yellow;
  height: 70px;
}
#style2 tr td:nth-child(3) {
  background: blue;
  color: white;
  width: 250px;
}
to achieve this effect:
1990 2000 revenue
type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software


© Robert M. Kline