Introducing how tables work
Using borders, padding, and spacing
Creating accessible tables
Enhancing tables with CSS
Designing tables for web page layout

The great table debate

Tables were initially intended as a means of displaying tabular data online, enabling web designers to rapidly mark up things like price lists, statistical comparisons, specification lists, spreadsheets, charts, forms, and so on (the following example shows a simple table.

 

It wasn’t long, however, before web designers realized that you could place any web content within table cells, and this rapidly led to web designers chopping up Photoshop layouts and piecing them back together in table-based web pages, often by using automated tools. CSS should have put an end to that, but many web designers continue to use tables for layout because they’re simple to set up—even though they cause problems (see the “Tables for layout” section later in the chapter).

The strong will of CSS advocates, who typically shout that tables are evil, sometimes leads designers to believe that tables should be ditched entirely—however, that’s not the case at all. As mentioned, tables have a specific purpose in HTML, and one that’s still valid. Therefore, the bulk of this chapter is going to look at tables in the context for which they’re intended: the formatting of tabular data. Web page layout will be looked at in the next chapter, which concentrates on CSS layout.

How tables work

In this section, we’re going to look at how tables are structured, and some of the table element’s attributes, which enable you to define the table’s dimensions and borders, along with the spacing, padding, and alignment of its cells.

Tabular data works via a system of rows and columns, and HTML tables work in the same< way. The table element defines the beginning and end of a table. Within the table element are table row elements (<tr></tr>), and nested within those are table cell elements (<td></td>). The actual content is placed inside the td elements. Therefore, a simple table with two rows containing two cells each is created like this:

<table>
<tr><td>Cell one</td><td>Cell two</td></tr>
<tr><td>Cell three</td><td>Cell four</td></tr>
</table>

Adding a border

You can place a border around table cells by using the border attribute and setting its value to 1 or greater. The adjacent example shows how this looks in a web browser. HTML borders for tables have a kind of 3D effect and tend to look clunky and oldfashioned. If you want to add a border to a table, this is best done in CSS.

 

 

 

Cell spacing and cell padding

In addition to amending the border size, it’s possible to change the amount of padding within a table’s cells, as well as the spacing between all the cells in a table. This is done with the cellpadding and cellspacing attributes, respectively. In the rather extreme example that follows, cellpadding is set to 20, cellspacing to 40, and border to 5, so that each can be differentiated with ease (see the subsequent screenshot). As you can see, cellspacing not only affects the spacing between the cells, but also the distance between the cells and the table’s edges. (The CSS property border-spacing is intended to do the same thing as cellspacing, but Internet Explorer to version 7 doesn’t support it.)

<table cellpadding="20" cellspacing="40" border="5">
<tr><td>Cell one</td><td>Cell two</td></tr>
<tr><td>Cell three</td><td>Cell four</td></tr>
</table>

 

 

 

 

 

 

 

 

 

 

You might be thinking that design-wise, this example sucks, and you’d be right. The chunko- vision 3D border isn’t particularly tasteful. However, you can omit the border attribute and use CSS to style borders instead—see the “Styling a table” section later on in this chapter. That section also details how to set padding in CSS, which provides you with sitewide control over cell padding. CSS also gives you much finer control over the individual elements in a table—whereas the inline HTML attributes impose a one-style-fits-all straightjacket.

Spanning rows and cells

It’s sometimes necessary for data to span multiple rows or columns. This is achieved via the rowspan and colspan attributes, respectively. In the following table, the first row has three cells. However, in the second row, the first cell spans two rows and the second cell spans two columns. This means the second row lacks a third cell, and the third row also only has two cells (whose contents align with the second and third cells of the top row). See the following screenshot of the table to help make sense of this.

<table border="1" cellpadding="2">
<tr>
<td>A cell</td>
<td>Another cell</td>
<td>Yet another cell!</td>
</tr>
<tr>
<td rowspan="2">A cell that spans two rows</td>
<td colspan="2">A cell that spans two columns</td>
</tr>
<tr>
<td>Another cell</td>
<td>The last cell</td>
</tr>
</table>

 

 

 

 

Take care when spanning rows or columns with a cell, because it’s easy to add extra cells accidentally. For instance, in the preceding example, it would be easy to absentmindedly add a third cell to both the second and third rows—however, doing so appends the extra cells to the end of the table (see the following example), which looks bad, and—more important—makes little structural sense. Also, some screen readers have difficulty handling such data, often assigning the wrong headers to various pieces of data (see the “Creating accessible tables” section later in the chapter for information on table headers).