XHTML | HTML to XHTML

Quotations and Tables

Before continuing on with updating the content of the solar system page, there are a couple of attributes that should be added to the html tag. Neither of these attributes are required for valid XHTML, but should be specified for good practice:

<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">

An XHTML attribute is specified by attribute name="attribute value".

XHTML Rule: Attribute values must be quoted.

In HTML, attribute values could be specified such as xml:lang=en-us. In XHTML, attribute values, even numeric ones, must be quoted. In the html tag shown above, the two attributes are xmlns (value: http://www.w3.org/1999/xhtml) and xml:lang (value: en-us).

The xmlns attribute is good practice due to the the XML nature of XHTML. It essentially signifies that the tagnames that you are using in your document should be associated with the W3C's XHTML namespace. Specifying the XML namespace will keep the tags defined in the document type definintion (DTD) given in the DOCTYPE declaration from "colliding" with identical tagnames specified in another DTD. While this is usually not a problem with XHTML in a browser, it is still good practice to include this attribute for the html tag.

The xml:lang attribute is pretty straightforward. It specifies the language used in the body of the XHTML source file. The value en specifies English as the content language, and a country code us which specifies the United States. The country code does not have to be specified as part of the xml:lang value. Specifying xml:lang="en" would be valid as well.

Quotations

The powers that be decided to beef up the content to be marked up for display on the Internet, and have provided a new text file. Besides replacing the list with a table containing more data, the revised content includes additional paragraphs and adds a couple of quotations.

Just a reminder, the tag for marking up paragraphs is the p tag.

Quotations in XHTML come in two flavours: inline quotations and block quotations. An inline quote (the q tag) is generally shorter and one that should be contained within a block-level element (such as a p element). The browser should put quotation marks around the content of the q tag, and so these should not be specified within the content, or else you will get two pairs of quotes.

For example,

<p>Gene Kranz said, <q>"Failure is not an option."</q></p>

will render like this:

Gene Kranz said, "Failure is not an option."

Remove the quotation marks from the content of the q tag, and it renders fine.

Gene Kranz said, Failure is not an option.

A block quotation is for larger quotations or smaller ones that are meant to stand alone as a block of text. A block quotation cannot be contained within a paragraph. Instead, the quotation must be contained within another block level element (such as p), which is then wrapped within blockquote beginning and ending tags.

For the content of the solar system page, the blockquote tag suits our purposes, since the quotations given are separate paragraphs.

<blockquote><p>"Lie on your back and look at the stars." - H.
Jackson Brown, Jr. (from Life's Little Instruction Book</p>
</blockquote>

and:

<blockquote><p>"Willingly would I burn to death like Phaeton, were
this the price for reaching the Sun and learning its shape, its
size, and its distance." - Eudoxus</p></blockquote>

For a block quotation, you must supply the quotation marks. The block quotation is usually rendered by browsers with indented margins.

"Willingly would I burn to death like Phaeton, were this the price for reaching the Sun and learning its shape, its size, and its distance." - Eudoxus

If you are quoting from a web site, you can use the cite attribute to give the URI (uniform resource locator). The URI will usually in this case be the full address, such as http://www.google.com. So if you were supplying a quote from the Google page, you could include a cite="http://www.google.com" attribute for the q or blockquote element, whichever one you were using.

Tables

Tables are a useful means to present information. For our planets, we wish to include additional information -- gravity ratio to earth, diameter, and average temperature -- that is better presented in a table rather than a list.

A table's contents is presented in rows containing cells. Columns are implicitly created by the relative position of the cells within the rows.

The table and caption Tags

The main table tag is a container for the table elements. So to begin our table, we just need:

<table>
</table>

The caption tag can be used to specify a caption for the table, and must be coded immediately after the beginning table tag. The table of planet info has the caption "Planets of Our Solar System", so we add it thus:

<table>
  <caption>Planets of Our Solar System</caption>
</table>

The caption text is usually rendered above the table. The caption is not required for a table.

The thead, tbody and tr Tags

Our planet table has a distinct structure of one header row and nine data rows. The header row would be considered the table header (thead), while the data rows would be considered the table body (tbody).

Table rows are defined by the tr tag. We have a total of ten rows in our table of planets, one row for the column headers, and the other nine for the planets.

So far we have this markup for the table.

<table>
  <caption>Planets of Our Solar System</caption>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  <tbody>
</table>

A table element may contain only one thead element, but can contain multiple tbody elements. This can be useful when formatting presentation for the table, by visually grouping together data rows with a specialized border, for example. The thead and tbody elements are not strictly required to be used in marking up a table. Many tables are just marked up as a series of rows and table cells, which will still be valid XHTML. However, if thead and tbody are used, the thead element must precede the tbody element.

A table element may also contain a tfoot element, which like thead, can only occur once within a table, and must occur after the tbody element. Although our table of planets does not have a footer, tfoot can be useful in tables that have a row or set of rows that summarize the tables' data.

The th and td Tags

The column headers are marked up using the table header (th) tag. Browsers usually render the contents of a table header cell differently (usally in bold) from the other table cells.

"Normal" table cells are marked up using the table data cell (td) tag.

The content of the rows of column headers and the row of Mercury data should be marked up like this:

<thead>
  <tr>
    <th>Name</th>
    <th>Average Dist. From Sun</th>
    <th>Diameter</th>
    <th>Average Temp.</th>
    <th>Gravity</th>
    <th>Moons</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Mercury</td>    
    <td>57,909,175 km</td>
    <td>4,879.4 km</td>
    <td>452 K</td>
    <td>0.376</td>
    <td>No moons</td>
  </tr>
</tbody>

Notice that I did not include line break <br /> tags for the "Average Dist. From Sun" and "Average Temp." headers as shown in the text file. By default, the contents of a table cell will be "word wrapped" if necessary within the bounds of the cell.

The table rendered with these two rows would look something like this:

Planets of Our Solar System
Name Average Dist. From Sun Diameter Average Temp. Gravity Moons
Mercury 57,909,175 km 4,879.4 km 452 K 0.376 No moons

The default rendering of a table by most browsers is not very pretty. There are attributes for the table-related tags in XHTML that can be used to format the table, but those will not be covered here. In the CSS tutorial, you will see how a table like this can be presented in a more visually pleasing manner.

The colgroup and col Tags

The colgroup and col tags are useful to specify a column or group of columns in order to be able to format them for presentation. Our planet table has a combination of table data cells containing text data and numerical data and colgroup and col tags could be useful to group the data cells of a column together for formatting.

However, browser implementions for colgroup and col are inconsistent. Internet Explorer 6.02, for example, will apply the font-family style rules at the column level, but Mozilla 1.7 does not. Both will apply a cell background style to a column. So if using these tags, I would not rely on them to apply CSS style rules. However, it won't hurt to add them, for if nothing else, when browsers do become more consistent in applying CSS styles based on these tags, the marked-up columns would be ready for use.

These tags must immediately follow the caption tag if specified, and precede any other elements within a table's markup structure.

As mentioned, for our planet table, we have a mix of data types, numerical data and text data. Also, for the planet names, it might be useful to assign a unique id attribute to that column, in case we want to perform special formatting for that column (such as some shading), that we don't want to apply to the column on the moons. These tags can be marked up for this table like this:

<caption>Planets of Our Solar System</caption>
  <col id="planetNames" class="text" />
  <col class="numeric" span="4"/>
  <col class="text" />

Notice that the col tag, like the br tag is an empty tag, so I used the /> method to properly close the tag. The colgroup tag was not used since we didn't really have multiple groups of columns to group together.

The id and class attributes are among the common attributes of XHTML elements. The id attribute value must be unique for the element from all other id attribute values specified in the XHTML source. The class attribute is useful for grouping elements, especially for later formatting with CSS.

Since col and colgroup elements are not completely reliable for applying CSS rules, we will want to assign the data cells that contain text elements and the data cells that contain numeric elements a class attribute. This will allow us to specify a proportional font for the text elements and a fixed-width font for the numeric elements as appropriate by using the class attribute values assigned to the cells.

The values for the class attribute are not predefined, but it is a good idea to give a value that conveys meaning. In this case, I will assign a value of text for the data cells containing text, and numeric for the data cells containing numerical data.

So for the cells containing the planet names and the moons, we should code the beginning td tag with a class attribute like this:

<td class="text">Mercury</td>

and for the numeric data cells like this:

<td class="numeric">57,909,175 km</td>

Table Structure attributes

There are many attributes for table-related tags that can be used to format a table's appearance, which this tutorial does not cover, since formatting will be covered in CSS. However, there are other attributes for these tags that are often needed to define the structure of a table. For example, let's say we had a table for just Mercury data that was laid out in a text document like this: 

Name    Average Distance From Sun   Diameter    Average Temperature 
------- -------------------------   ----------  -------------------
Mercury    57,909,175 km            4,879.4 km          452 K    
        -------------------------   -------------------------------
                Gravity             Moons
        -------------------------   -------------------------------
                 0.376              No moons

For this table, we have the following structure:

Column Header Column Header Column Header Column Header
Table data cell spanning 3 rows Table data cell Table data cell Table data cell
Column Header Column Header spanning 2 columns
Table data cell Table data cell spanning 2 columns

Here is the markup for the table in the example above:


<table id="sample">
  <tr>
    <th>Column Header</th>
    <th>Column Header</th>
    <th>Column Header</th>
    <th>Column Header</th>
  </tr>
  <tr>
    <td rowspan="3">Table data cell spanning 3 rows</td>
    <td>Table data cell</td>
    <td>Table data cell</td>
    <td>Table data cell</td>
  </tr>
  <tr>
    <th>Column Header</th>
    <th colspan="2">Column Header spanning 2 columns</th>
  </tr>
  <tr>
    <td>Table data cell</td>
    <td colspan="2">Table data cell spanning 2 columns</td>
  </tr>
</table>

I specified the id attribute for the table tag so that I could apply CSS styles to this particular table. This technique will be covered in the CSS tutorial.

In this tutorial, however, I would like to point out the following two attributes, which are necessary to properly reflect the table's structure:

The rowspan attribute is used to indicate if a table cell is to span more than one row, which in this case is 3 rows.

The colspan attribute is used to indicate if a table cell is to span more than one column, which in this case is 2 columns.

The colspan and rowspan are not mutually exclusive, so you can apply both attributes to a table cell if needed.

This wraps up the coverage on tables in this tutorial. Once you have finished marking up the new version of the page, it might be a good time to save and see how it looks.

Next Chapter - Links and Images

Introduction | Getting Started | A Basic XHTML Page | Basic Tags | Quotations | Tables | Text Links | Images | Image Links | Image Maps | Finishing Touches | Additional Tags | Conclusion | XHTML 1.1