Skip to content Skip to navigation
Summary: This module discusses how to add tables to your XHTML files. The tags discussed are <table>, <caption>, <tr>, <td>, and <th>
The primary goal of this "Web Programming Quick Start" series is to get the reader to the point of doing something productive with a minimum of time and effort. It is not intended to be an exhaustive treatment/reference of any of the subjects discussed. This is also very much a work in progress. All comments, criticisms, suggestions, etc. are most welcome.
In the series of modules on XHTML (eXtensible HyperText Markup Language) and CSS (Cascading Style Sheets), we will be following the "current wisdom" on web page construction and design as exemplified by the three excellent web-related books of Rachael Andrew. Specifically, we will endeavor to keep the content and the styling/formatting of the web documents separate.
This module builds on material discussed in some other XHTML modules, e.g. creation of an initial XHTML file. A complete listing of the links to all XHTML and CSS modules is also available.
Segments of the XHTML source code are shown in this module as image files, but links are given to the XHTML files and the source is readily available from a browser via the menu bar using File/Save As... , View/Source, or something comparable.
As indicated earlier, we will leave the formatting/styling of the element being discussed (in this case a table) to our later discussion of CSS (Cascading Style Sheets) and endeavor to show the only basic specification of the structure.
If we asked ourselves what the structural elements of a table are, we would likely conclude that they are the rows, columns, individual cells, rows and/or columns that are "headers," and possibly a caption for the table. What follows reflects this. We will examine four examples of tables. The only variation will be in the "headers." A section of the Table dialog box for Dreamweaver shows the differences graphically. Figure 1 shows the different options.
 |
Our first example is tabledemo1.html. Figure 2 shows the XHTML code for the <body> section of this file and Figure 3 gives a Firefox browser view of the file.
 |
 |
Here is a discussion of the XHTML code:
table tag has two attributes. Strictly speaking a border specification (in this case
it is 1 pixel), is a styling consideration, but we specify it here so that the resulting tables
and their elements are more easily viewed. The summary attribute is used primarily
for accessibility purposes, providing some more text information about the table for those who might
not be able to view the table easily and/or are relying on a reader program.
<tr> ("table row") tag.
</tr>
<td> and
</td> ("table data") tags.
Our second example is tabledemo2.html.
Figure 4 shows the XHTML code for the <body> section of this file and
Figure 5 gives a Firefox browser view of the file.
 |
 |
Lines 14, 20, 26, and 32 are the only lines different from our first example and
show the changes for obtaining headers along the left side of the table. Notice that the first
element in each row no longer has the <td> tag, instead it is replaced by the
<th> ("table header") tag. The scope="row" attribute specifies that this is the
header element for the current row.
You might also note that the default presentation in the Firefox browser (Figure 5) presents the headers boldfaced and centered in each header cell. We can style this as we like and will discuss this in our work on Cascading Style Sheets (CSS).
Our third example is tabledemo3.html. Figure 6 shows the XHTML code for the <body> section of this file and Figure 7 gives a Firefox browser view of the file.
 |
 |
Lines 14 through 17 are the only lines different from our first example and
show the changes for obtaining headers along the top of the table. As with our second example, in the
the cell, where we want to specify a header, we replace the
<td> tags, with a
<th> ("table header") tag. In this case
the scope="col" attribute specifies that this cell is the
header element for the current column.
As we observed earlier, the default presentation in the Firefox browser (Figure 5) presents the headers boldfaced and centered in each header cell. We can style this as we like and will discuss this in our work on Cascading Style Sheets (CSS).
Our fourth example is tabledemo4.html. Figure 8 shows the XHTML code for the <body> section of this file and Figure 9 gives aFirefoxbrowser view of the file.
 |
 |
The relevant lines (14-17, 20, 26, and 32) are simply a combination of the previous two examples of left and top headers, and the presentation in Firefox is similarly a combination of what we saw in the previous two examples.
Dreamweaver alleviates the tedium associated with producing the structure of a table. From the menu bar, Insert/Table opens the Table dialog box shown in Figure 10. The settings shown initiate the generation of the first example (no headers) in this module. The only task remaining is to fill in the table, as shown in Figure 11
 |
 |
The Table dialog box is also available via the 
button in the Common category of the Insert Toolbar, shown in Figure 12.
 |
More about this module: Metadata | Version History
This work is licensed by Ronald Sawey under a Creative Commons Attribution License (CC-BY 2.0), and is an Open Educational Resource.
Last edited by Ronald Sawey on Jan 3, 2007 2:35 pm US/Central.
