Chapter 12

Tables

by Eric Ladd

• How HTML Tables Are Organized
• Table Basics
  • The <TABLE> Tag
  • Creating a Table Row
  • Creating a Table Cell
• Alignment
  • Aligning the Entire Table
  • Alignment Within a Row
  • Alignment Within a Cell
• Controlling Other Table Attributes
  • Adding a Caption
  • Setting the Width
  • Adding a Border
  • Spacing Within a Cell
  • Spacing Between Cells
• Spanning Multiple Rows or Columns
  • Using the COLSPAN Attribute
  • Using the ROWSPAN Attribute
• What Elements Can Be Placed in a Table Cell
• Tables as a Design Tool
  • Creating a Complex Layout
  • Aligning Custom Bullet Characters
  • Aligning Form Fields

Tables have been around for a while, but the table tags weren't officially made part of HTML until the HTML 3.2 draft was released. Browsers like Netscape Navigator and Microsoft Internet Explorer were supporting the table tags almost as soon as they were proposed and, now that tables are standard HTML, these companies are extending the tags to produce tables that are even more full-featured.

This chapter introduces you to tables as they have been written into the HTML 3.2 specification. While tables are intended for the display of columnar data, you'll find, as you progress through this chapter, that tables are much more than that-they are a bona fide page design tool as well.

How HTML Tables Are Organized

To understand the table tags better, it helps to take a moment to consider how HTML tables are structured. The fundamental building blocks of an HTML table are cells, which can contain a data element of the table or a heading for a column of data. Related cells are logically grouped together in a row of the table. The rows, in turn, combine to make up the entire table.

If you can keep this breakdown in mind as you read the next few sections, the syntax of the table tags will make much more sense to you. Remember:

• Cells are the basic units of a table; they can contain data elements or column headers.
• Cells are grouped together into rows.
• Rows are grouped together to produce an entire table.

Table Basics

Before delving into the more advanced uses of tables, it's instructive to look at a table being used for the purpose tables are intended: to display columns of data. The next three sections present the tags you need to create a simple table for this purpose.

The <TABLE> Tag

All table-related tags occur between the <TABLE> and </TABLE> container tags. Any table-related tags occurring outside of these tags will be ignored.

A good habit you should get into immediately is to put the </TABLE> tag into your HTML file when you put the <TABLE> tag in. If you don't have a </TABLE> tag and you go to a browser to preview your work, the browser won't render the table. This is because browsers read through all of the code to produce a table before rendering it. It has to do this to compute how much space it needs for the table. Once the amount of space is known and allocated, the browser goes back and fills in the cells. Without a </TABLE> tag, a browser can't know that it has hit the end of a table and, therefore, won't render any of it.

Creating a Table Row

Tables are made up of rows, so you need to know how to define a row. The <TR> and </TR> tags are used to contain the HTML tags that define the individual cells. You can place as many <TR> and </TR> tag pairs as you need inside a table, each pair accounting for one row.

So far, then, the code for a basic HTML table with m rows looks like:

<TABLE>
   <TR> ... </TR>   <!-- Row 1 -->
   <TR> ... </TR>   <!-- Row 2 -->
   ...
   <TR> ... </TR>   <!-- Row m -->
</TABLE>

Creating a Table Cell

Table cells come in two varieties: header cells for headers that appear over a column of data and data cells for the individual entries in the table.

Header Cells  A table header cell is defined with the <TH> and </TH> tag pair. The contents of a table header cell are automatically centered and appear in boldface, so you typically don't need to format them further.

In a standard table, headers usually comprise the first row so that each column in the table has some type of heading over it. If the basic table you're developing has n columns of data, the HTML for the table would look like:

<TABLE>
   <TR>    <!-- Row 1 -->
      <TH>Header 1</TH>
      <TH>Header 2</TH>
      ...
      <TH>Header n</TH>
   </TR>
   <TR> ... </TR>   <!-- Row 2 -->
   ...
   <TR> ... </TR>   <!-- Row m -->
</TABLE>

Data Cells  Data cells usually make up the bulk of the table and are defined by <TD> and </TD> tags. Text in data cells is left justified by default. Any special formatting, like boldface or italics, has to be done by including the appropriate formatting tags inside the <TD> and </TD> pairs.

If we let data cells constitute the rest of the basic table we're constructing, we have the following HTML:

<TABLE>
   <TR>    <!-- Row 1 -->
      <TH>Header 1</TH>
      <TH>Header 2</TH>
      ...
      <TH>Header n</TH>
   </TR>
   <TR>    <!-- Row 2 -->
      <TD>Data element 1</TD>
      <TD>Data element 2</TD>
      ...
      <TD>Data element n</TD>
   </TR>
   ...
   <TR>    <!-- Row m -->
      <TD>Data element 1</TD>
      <TD>Data element 2</TD>
      ...
      <TD>Data element n</TD>
   </TR>
</TABLE>

The HTML above makes for a nice template that you can use whenever starting a table. By filling in the headers and data elements with some genuine information, we can produce a table like the one you see in Figure 12.1.

Figure 12.1 : Displaying hockey team statistics or any other type of information presented in columns is a good use of HTML tables.

<TABLE>
   <TR>    <!-- Row 1 -->
      <TH>Player</TH>
      <TH>Goals</TH>
      <TH>Assists</TH>
      <TH>Points</TH>
   </TR>
   <TR>    <!-- Row 2 -->
      <TD>Anne</TD>
      <TD>7</TD>
      <TD>12</TD>
      <TD>19</TD>
   </TR>
   <TR>    <!-- Row 3 -->
      <TD>Eric</TD>
      <TD>4</TD>
      <TD>11</TD>
      <TD>15</TD>
   </TR>
   <TR>    <!-- Row 4 -->
      <TD>Jim</TD>
      <TD>10</TD>
      <TD>14</TD>
      <TD>24</TD>
   </TR>
</TABLE>

Alignment

The beauty of HTML tables is the precise control you have over the alignment of content in individual cells and over the table itself. There are two types of alignment that you can specify:

• Horizontal alignment refers to the alignment of an element across the width of something; for example, the alignment of a header across the width of a cell, or the alignment of a table across the width of the page. Horizontal alignment is controlled by the ALIGN attribute. You can set ALIGN equal to LEFT, CENTER, or RIGHT.
• Vertical alignment refers to the alignment of an element between the top and bottom of a cell. You control the vertical alignment of cell contents by setting the VALIGN attribute to TOP, MIDDLE, or BOTTOM.

Aligning the Entire Table

You can use the ALIGN attribute in the <TABLE> tag to specify how the table should be aligned relative to the browser window. Setting ALIGN to LEFT or RIGHT floats the table in the left or right margin, respectively. Floating tables behave much like floating images in that you can wrap text around them. This is how you produce a page element like a pull quote (see Figure 12.2).

Figure 12.2 : The text of a pull quote is contained in a floating table while the rest of the body text wraps around it.

Using the CENTER value of ALIGN centers the table in the browser window, though not all browsers support this. If you can't center a table this way, you can enclose the HTML that produces the table between the <CENTER> and </CENTER> tags. This should become unnecessary, though, as browsers come into compliance with the HTML 3.2 standard.

Alignment Within a Row

If you want the vertical or the horizontal alignment to be the same for every cell in a given row, you can use the VALIGN and ALIGN attributes in the row's <TR> tag. Any alignment specified in a <TR> tag will override all default alignments.

Alignment Within a Cell

HTML 3.2 permits alignment control all the way down to the cell level. You can prescribe vertical or horizontal alignments in both header and data cells by using the VALIGN or ALIGN attributes in <TH> or <TD> tags. Any alignment specified at the cell level overrides any default alignments and any alignments specified in a <TR> tag.

Setting alignments in individual cells represents the finest level of control you get over table alignment. In theory, you could manually specify vertical and horizontal alignments in every single cell of your tables if you needed to. Unfortunately, it's easy to get lost among all of those VALIGN and ALIGN attributes, especially when it comes to deciding which will take precedence. If you're having trouble mastering table alignment, just remember the following hierarchy:

• Alignments specified in <TD> or <TH> tags override all other alignments, but apply only to the cell being defined.
• Alignments specified in a <TR> tag override default alignments and apply to all cells in a row, unless overridden by an alignment specification in a <TD> or <TH> tag.
• In the absence of alignment specifications in <TR>, <TD>, or <TH> tags, default alignments are used.

Controlling Other Table Attributes

In addition to tweaking alignments, you have a say in other aspects of the tables you create as well. These include:

• Captions
• Width of the table
• Borders
• Spacing within and between cells
• How many rows or columns a cell should occupy

The next five sections walk you through each of these table features and discuss the HTML tags and attributes you need to know to produce them.

Adding a Caption

To put a caption on your table, enclose the caption text between the <CAPTION> and </CAPTION> tags. Captions appear centered over the table and the text may be broken to match the table's width (see Figure 12.3). You can also use physical style tags to mark up your caption text. The HTML to produce Figure 12.3 follows:

Figure 12.3 : A caption helps give readers a context for the information in your tables.

<TABLE>
   <CAPTION><B>Team Statistics - 1996-97 Season</B></CAPTION>
   <TR>    <!-- Row 1 -->
      <TH>Player</TH>
      <TH>Goals</TH>
      <TH>Assists</TH>
      <TH>Points</TH>
   </TR>
   <TR>    <!-- Row 2 -->
      <TD>Anne</TD>
      <TD>7</TD>
      <TD>12</TD>
      <TD>19</TD>
   </TR>
   <TR>    <!-- Row 3 -->
      <TD>Eric</TD>
      <TD>4</TD>
      <TD>11</TD>
      <TD>15</TD>
   </TR>
   <TR>    <!-- Row 4 -->
      <TD>Jim</TD>
      <TD>10</TD>
      <TD>14</TD>
      <TD>24</TD>
   </TR>
</TABLE>

If you prefer your caption below the table, you can include the ALIGN=BOTTOM attribute in the <CAPTION> tag.

Setting the Width

The WIDTH attribute of the <TABLE> tag enables you to specify how wide the table should be in the browser window. You can set WIDTH to a specific number of pixels or to a percentage of the available screen width.

WIDTH is often used to force a table to occupy the entire width of the browser window. If we change the <TABLE> tag in the HTML code in the previous section to:

<TABLE WIDTH=100%>

the table is rendered as shown in Figure 12.4. The statistics are centered in their columns for easier readability.

Figure 12.4 : You can force a browser to make a table as wide as you want by using the WIDTH attribute of the tag.

TIP

Since you can't know how every user has set his or her screen width, you should set WIDTH equal to a percentage whenever possible. The only exception to this is if the table has to be a certain number of pixels wide to accommodate an image in one of the cells or to achieve a certain layout effect.