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:
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:
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:
<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.
Figure 8.2. An example of a table that includes headings in the leftmost column.
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:
<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:
<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.
Figure 8.3. The difference between empty cells and really empty cells.
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