Table Parts

Before getting into the actual HTML code to create a table, let's look at the following terms so that we both know what we're talking about:

• The caption indicates what the table is about: for example, "Voting Statistics, 19501994," or "Toy Distribution Per Room at 1564 Elm St." Captions are optional.

• The table headings label the rows, columns, or both. Usually they're in an emphasized font that's different from the rest of the table. They're optional.

• Table cells are the individual squares in the table. A cell can contain normal table data or a table heading.

• Table data is the values in the table itself. The combination of the table headings and table data makes up the sum of the table.

Figure 8.1 shows a typical table and its parts.

Figure 8.1. The elements that make up a table.

The <table> Element

To create a table in HTML, you use the <table>...</table> element to enclose the code for an optional caption, and then add the contents of the table itself:

<table> ...table caption (optional) and contents... </table>

To demonstrate what the HTML code for a complete table looks like, here's an example of the code that created the table shown in Figure 8.1. Don't be concerned if you don't know what this all means right now. For now, notice that the table starts with a <table> tag and its attributes, and ends with a </table> tag:

<table border="1"> <caption>Vital Statistics</caption>  <tr>   <th>Name</th>   <th>Height</th>   <th>Weight</th>   <th>Eye Color</th>  </tr>  <tr>   <td>Alison</td>   <td>5'4"</td>   <td>140</td>   <td>Blue</td>  </tr>  <tr>   <td>Tom</td>   <td>6'0"</td>   <td>165</td>   <td>Hazel</td>  </tr>  <tr>   <td>Susan</td>   <td>5'1"</td>   <td>97</td>   <td>Brown</td>  </tr>  </table>

The Table Summary

If you want to play by the rules of XHTML, every time you create a table, the <table> element must include the summary attribute. The value of the summary should be a short description of the table's contents. This value isn't used by normal visual browsers; instead, it's intended for screen readers and other browsers created for users with disabilities. For example, the <table> tag in the previous example should include a summary attribute like this:

<table summary="vital statistics">

For your pages to play by the XHTML rules, you must include the summary attribute for all of your tables (just as you must include alt text for all of your images). You'll learn more about why accessibility features are important in Lesson 17, "Designing for the Real World."

Rows and Cells

Now that you've been introduced to the <table> element, we'll move on to the rows and cells. Inside the <table>...</table> element, you define the actual contents of the table. Tables are specified in HTML row by row, and each row definition contains definitions for all the cells in that row. So, to define a table, you start by defining a top row and each cell in turn, left to right. Then you define a second row and its cells, and so on. The number of columns is automatically calculated based on how many cells there are in each row.

Each table row starts with the <tr> tag and ends with the closing </tr>. Your table can have as many rows and columns as you like, but you should make sure that each row has the same number of cells so that the columns line up.

The cells within each row are created using one of two elements:

• <th>...</th> elements are used for heading cells. Generally, browsers center the contents of a <th> cell and render any text in the cell in boldface.

• <td>...</td> elements are used for data cells. TD stands for table data.

Note

You might have heard somewhere that closing tags are not required for <th>, <td>, and <tr> tags. You might even see HTML that's written without them. However, XHTML requires that you include them, and including them makes your code much easier to follow. Don't leave them out.

In this table example, the heading cells appear in the top row and are defined with the following code:

<tr>  <th>Name</th>  <th>Height</th>  <th>Weight</th>  <th>Eye Color</th> </tr>

The top row is followed by three rows of data cells, which are coded as follows:

<tr>  <td>Alison</td>  <td>5'4"</td>  <td>140</td>  <td>Blue</td> </tr> <tr>  <td>Tom</td>  <td>6'0"</td>  <td>165</td>  <td>Blue</td> </tr> <tr>  <td>Susan</td>  <td>5'1"</td>  <td>97</td>  <td>Brown</td> </tr>

As you've seen, you can place the headings along the top edge by defining the <th> elements inside the first row. Let's make a slight modification to the table. You'll put the headings along the left edge of the table instead. To accomplish this, put each <th> in the first cell in each row and follow it with the data that pertains to each heading. The new code looks like the following:

Input

<tr>  <th>Name</th>  <td>Alison</td>  <td>Tom</td>  <td>Susan</td> </tr> <tr>  <th>Height</th>  <td>5'4"</td>  <td>6'0"</td>  <td>5'1"</td> </tr> <tr>  <th>Weight</th>  <td>140</td>  <td>165</td>  <td>97</td> </tr> <tr>  <th>Eye Color</th>  <td>Blue</td>  <td>Blue</td>  <td>Brown</td> </tr>

Figure 8.2 shows how this table is displayed in a browser.

Output

Figure 8.2. An example of a table that includes headings in the leftmost column.

Empty Cells

Both table heading cells and data cells can contain any text, HTML code, or both, including links, lists, forms, images, and other tables. But what if you want a cell with nothing in it? That's easy. Just define a cell with a <th> or <td> element with nothing inside it:

Input

<table border="1"> <tr>   <td></td>   <td>10</td>   <td>20</td> </tr> </table>

Some browsers display empty cells of this sort as if they don't exist at all. If you want to force a truly empty cell, you can add a line break with no other text in that cell by itself:

Input

<table border="1"> <tr>   <td><br /></td>   <td>10</td>   <td>20</td> </tr> </table>

Figure 8.3 shows examples of both types of empty cells: the empty cell and the really empty cell with the line break added.

Output

Figure 8.3. The difference between empty cells and really empty cells.

Captions

Table captions tell your visitor what the table is for. The <caption> element, created just for this purpose, displays the text inside the tag as the table caption (usually centered above the table). Although you could use a regular paragraph or a heading as a caption for your table, tools that process HTML files can extract <caption> elements into a separate file, automatically number them, or treat them in special ways simply because they're captions.

If you don't want a caption, it's optional. If you just want a table and don't care about a label, leave the caption off.

The <caption> element goes inside the <table> element just before the table rows, and it contains the title of the table. It closes with the </caption> tag:

<table> <caption>Vital Statistics</caption> <tr>

Task: Exercise 8.1. Creating a Simple Table

Now that you know the basics of how to create a table, try a simple example. You'll create a table that indicates the colors you get when you mix the three primary colors together. Figure 8.4 shows the table you're going to re-create in this example.

Figure 8.4. A simple color table.

Here's a quick hint for laying out tables: Because HTML defines tables on a row-by-row basis, sometimes it can be difficult to keep track of the columns, particularly with very complex tables. Before you start actually writing HTML code, it's useful to make a sketch of your table so that you know the heads and the values of each cell. You might find that it's easiest to use a word processor with a table editor (such as Microsoft Word) or a spreadsheet to lay out your tables. Then, when you have the layout and the cell values, you can write the HTML code for that table. Eventually, if you do this enough, you'll think of these things in terms of HTML tags, whether you want to or not.

Start with a simple HTML framework for a page that contains a table. Like all HTML files, you can create this file in any text editor:

<html> <head> <title>Colors</title> </head> <body> <table> ...add table rows and cells here... </table> </body> </html>

Now start adding table rows inside the opening and closing <table> tags (where the line add table rows and cells here is). The first row is the three headings along the top of the table. The table row is indicated by <tr> and each cell by a <th> tag:

<tr>   <th>Red</th>   <th>Yellow</th>   <th>Blue</th> </tr>

Note

You can format the HTML code any way you want. As with all HTML, the browser ignores most extra spaces and returns. I like to format it like this, with the contents of the individual rows indented and the cell elements on separate lines, so that I can pick out the rows and columns more easily.

Now add the second row. The first cell in the second row is the Red heading on the left side of the table, so it will be the first cell in this row, followed by the cells for the table data:

<tr>   <th>Red</th>   <td>Red</td>   <td>Orange</td>   <td>Purple</td> </tr>

Continue by adding the remaining two rows in the table, with the Yellow and Blue headings. Here's what you have so far for the entire table:

Input

<table border="1" summary="color combinations"> <tr>   <th>Red</th>   <th>Yellow</th>   <th>Blue</th> </tr> <tr>   <th>Red</th>   <td>Red</td>   <td>Orange</td>   <td>Purple</td> </tr> <tr>   <th>Yellow</th>   <td>Orange</td>   <td>Yellow</td>   <td>Green</td> </tr> <tr>   <th>Blue</th>   <td>Purple</td>   <td>Green</td>   <td>Blue</td> </tr> </table>

Finally, add a simple caption. The <caption> element goes just after the <table> tag and just before the first <tr> tag:

<table border="1"> <caption>Mixing the Primary Colors</caption> <tr>

With a first draft of the code in place, test the HTML file in your favorite browser that supports tables. Figure 8.5 shows how it looks.

Output

Figure 8.5. The not-quiteperfect color table.

Oops! What happened with that top row? The headings are all messed up. The answer, of course, is that you need an empty cell at the beginning of that first row to space the headings out over the proper columns. HTML isn't smart enough to match it all up for you. (This is exactly the sort of error you're going to find the first time you test your tables.)

Add an empty table heading cell to that first row (here, it's the line <th><br /></th>):

Input

<tr>   <th><br /></th>   <th>Red</th>   <th>Yellow</th>   <th>Blue</th> </tr>

Note

I used <th> here, but it could be <td> just as easily. Because there's nothing in the cell, its formatting doesn't matter.

If you try it again, you should get the right result with all the headings over the right columns, as the original example in Figure 8.4 shows.