Lists and Tables

Table of contents

• Introduction
• Lists
  • Unordered lists
  • Ordered lists
  • Definition lists
  • Nested lists
• Tables
  • Table basics
  • Table captions
  • Table frames and rules
  • Cells that span multiple rows and/or columns
  • Using tables for page layout

Introduction

Lists and tables are tools for organizing multiple items within Web pages. Lists are used to present several items organized in a linear fashion along a single dimensions. Tables are used to present several items organized along two dimensions at the same time.

Tables are also used by many Web authors as a tool for page layout. That is, tables are used to arrange the elements that comprise a page, allowing the page author to specify the positioning and spatial relationships among the parts of the page. Although Cascading Style Sheets (CSS) is increasingly being used for this purpose instead, we will examine this way of using tables.

This page was written to provide students in my CS403 class with a simple sample document that demonstrates the use of lists and tables discussed in class. As with the other sample documents I have provided, the primary motivation has been to generate a relatively simple, but realistic, document that not only reviews the concepts presented in lecture, but also demonstrates their use in a real world" situation.

To get the most out of this document, you should first read it and then study the source that the browser rendered in order to produce it. Use your browser's ability to display the source of a document for this purpose.

Lists

XHTML provides three types of lists, each intended for a different purpose.

Unordered lists

Unordered lists are used to present simple list items that have no inherent order to them. A <ul> element is used to contain the list as a whole, and within that <ul> element must appear at least one <li> element. Each <li> element defines a single list item.

The following example lists some items to pack for a hike. Since the order in which you pack the items is irrelevant, an unordered list in appropriate.

• Food
• Water
• Windbreaker
• Sweatshirt
• Matches
• Flashlight
• Map

For another example of an unordered list, see the Table of Contents at the beginning of this page.

Ordered lists

Ordered lists are used to present simple list items with an inherent order. Therefore, if the order of the items in the list is important, an ordered list is preferable over an unordered list. With an ordered list, the <ol> element is used to define the list, and the <li> element is used as it is within the <ul> element to define the list items. Each <li> element defines a single list item.

The following example describes a series of steps to take when publishing a Web page. Since the order in which the steps are taken is vital to the success of the process, an ordered list is more appropriate than an unordered one.

1. Write the page using XHTML
2. View the page locally with a browser
3. Fix any problems in the XHTML
4. Transfer the completed page to the server host
5. Verify the page permissions
6. View the page from the server with a browser

Definition lists

Definition lists are typically used to present terms or phrases paired with their definitions. The <dl> element is used to define the list, and each item within the list generally consists of two separate parts. The first part is typically the term or phrase being defined, and it is specified within a <dt> element. The second part is typically the definition of the term or phrase presented in the first part, and it is specified within a <dd> element.

Although they are most commonly used to present terms and their definitions, definition lists are useful for any situation in which pairs of items need to be presented in a list form.

This example presents three types of XHTML elements and their definitions.

Block element

Defines a block of text terminated by an implied line break

Inline element

Marks up text without implying a line break so it can be used within a block element without ending the block

Replaced element

Acts as a placeholder for a non-textual page component and gets replaced by that component when the page is rendered by the browser

Nested lists

When an entire list appears within a list item of another list, it is considered a nested list. There is no magic involved in creating a nested list. Simply place the nested list inside one of the <li> elements of another list.

When nesting lists, they may be lists of the same or different types. For example, in the list that follows, ordered lists have been nested within the list items of an unordered list, to show the sales ranking of different varieties of fruits. If ranking did not need to be indicated unordered lists could have been nested within the unordered list instead.

• Apples
  1. Mcintosh
  2. Cortland
  3. Granny Smith
  4. Braeburn
• Pears
  1. Bartlett
  2. Red
  3. Bosc
• Grapes
  1. Green, seedless
  2. Red, seedless
  3. Concord

Tables

Tables are used to organize data into rows and columns. They are, however, extremely flexible, and often adapted to other purposes. The most common adaptation of tables is to use them for page layout. And although this use of tables is not recommended by the applicable standards, it is a relatively common practice among Web authors. As such, we will discuss tables in terms of both their recommended and non-recommended uses.

Table basics

The <table> element is used to create tables. Within the <table> element there must be one or more <tr> elements, one for each row of the table. Within each <tr> element, there must be one or more <td> and/or <th> elements, one for each cell within that row. The <td> element defines a standard data cell, while the <th> element defines a table header cell.

Table header cells are meant to represent headers for rows or columns, but may be used anywhere within a table. Table header cells differ from standard data cells in the default presentation of their contents.

Each cell of a table may contain a variety of XHTML elements, including paragraphs, logical divisions, line breaks, headings, images, and virtually any other page component that XHTML supports. Table cells may also contain other tables. A table that is defined within a cell of another table is called a nested table. Nested tables should be used with caution, however, since they can significantly increase the processing load on a browser. Table cells may also be left empty, if appropriate.

Below is a very simple table with four rows and three cells in each row. All of the cells in the first row are table header cells and the first cell in each row is a table header cell as well. Although this is by no means a requirement, it is a common enough occurrence that the example is typical.

Examine the source code for the table above. Note the following points:

• There are four <tr> elements within the <table> element. The first one represents the first row of the table, the second one represents the second row of the table, and so on.
• Each of these <tr> elements contains four <td> and/or <th> elements, which accounts for the four columns in the table.
• The header cells are rendered differently from the data cells, even though there are no presentational elements within them.
• The first cell in the first row is empty.
• The width of the columns is determined by their contents. By default a column is wide enough to accommodate the widest cell it contains. The same holds true for the height of rows, but it is not evident in this example.

Table captions

Tables may optionally have a caption that describes the purpose of the table as a whole. To create a caption for a table, use the <caption> element. The <caption> element must appear immediately after the <table> start tag, and its contents should be text for the browser to use in describing the table.

The example below adds a caption to the previous table.

Table frames and rules

A table is surrounded by a frame, and the cells within a table are separated from one another by lines called rules. By default, neither the frame nor the rules are visible. There are a variety of ways to control the appearance of the frame and rules.

The recommended way to control a table's frame and rules is by using Cascading Style Sheets (CSS). However, it can also be accomplished using attributes of the <table&rt; element. For the moment, we will examine the attributes. We will cover CSS later.

The most commonly used attribute for making the frame and rules visible is the <table&rt; element's border attribute. The value of the border attribute sets the width of the table's frame. If the value of the border attribute is set to 0, neither the frame nor the rules will be displayed. If the value of the border attribute is greater than 0, the frame will be displayed at that width in pixels. When the frame is displayed, so are the rules; however, the width of the rules is not affected by the value of the border attribute.

The example that follows is identical to the previous example with the simple addition of a border attribute set to a value of 1.

In some browsers, the first cell in the first row of this table will not be displayed because it has no contents. To get this cell to reliably appear, put something in it. A non-breaking space ( ) is commonly used to add content to a cell while allowing it to appear as if that cell is empty. Compare the following version of the table, where a non-breaking space has been inserted into the first cell of the first row.

In the next example, the border attribute has been given a value of 10. Note that this creates a noticeable change in the width of the frame surrounding the table, but has no impact on the width of the rules between the cells.

To provide more specific control over the frame, the <table> element accepts a frame attribute. There are several possible values for this attribute:

void

Turns off the frame entirely

border or box

Turns on the full frame

vsides

Turns on the frame on both the left and right edges

hsides

Turns on the frame on both the top and bottom edges

lhs

Turns on the frame on the left edge only

rhs

Turns on the frame on the right edge only

above

Turns on the frame on the top edge only

below

Turns on the frame on the bottom edge only

The example below uses a frame attribute set to a value of vsides. It does not use a border attribute. This causes different browsers to render the rules between cells differently. Try viewing the following example in a variety of browsers.

Compare the example above to the one below, which is identical except for the use of a border attribute with a value of 10.

To provide more specific control over the rules, the <table> element accepts a rules attribute. There are several possible values for this attribute:

none

Turns off the rules entirely

all

Turns on all the rules

rows

Turns on only the horizontal rules between rows

cols

Turns on only the vertical rules between columns

groups

Turns on only the rule between column groups and row groups (which we do not cover in this course)

The example below uses a rules attribute set to a value of rows. It does not use a border attribute. This causes different browsers to render the frame and rules differently. Try viewing the following example in a variety of browsers.

Compare the example above to the one below, which is identical except for the use of a border attribute with a value of 10.

To control the thickness of the rules between the cells, use the <table> element's cellspacing attribute. The value of this attribute must be a number indicating the desired rule thickness in pixels. The example below uses a border attribute with a value of 1 and a cellspacing attribute with a value of 10.

Since the rules occupy space even when they are invisible, the cellspacing attribute may be used, even when the rules are invisible, to control the space between cells. Consider the following example which is identical to the previous one with the border attribute removed.

Note that the rules surround all the cells of the table equally, including those cells around the outer edges. Therefore, setting the value of the cellspacing attribute also serves to increase the spacing between the outside cells and the table' frame. For instance, examine the following table which has a border attribute value of 20 and a cellspacing attribute value of 10.

Cells that span multiple rows and/or columns

Normally, each cell of a table is one column wide and one row high. In some circumstances, however, it is useful to create tables with certain cells that span more than one column and/or row. To accomplish this, each <td> and <th> element accepts both a colspan attribute and a rowspan attribute. For example, a <td> element with a colspan attribute set to a value of 3 would span across three columns of the table.

In the following example, notice how a cell was added to act as a header for the rightmost three columns. To accomplish this, a new row was added at the top of the table. This row contains only two <th> elements. One spans only the first column (so it does not need a colspan attribute) and the other spans the remaining three columns (using a colspan attribute with a value of 3. Since they span four columns between them, these two cells suffice, even though the other rows all contain four cells.

Notice how awkward the table now looks with two empty cells in the upper left. The next example attempts to improve the appearance of the table by merging these two cells into one. The first cell in the first row is given a rowspan attribute with a value of 2. This causes the cell to span both the first and second columns. Since this cell is now occupying the first column in the second row, the second row of the table only needs to contain three cells for the remaining columns.

Using tables for page layout

Although CSS is now recommended for performing page layout, Web authors have traditionally made extensive use of tables for this purpose. Since students are likely to encounter this use of tables in code and interact with other Web authors and tutorial resources that advocate this approach, I have decided to cover it in this class, despite the fact that it is not recommended by the standards.

Page layout refers to the process of organizing the components that comprise a Web page. For many years, tables were the only mechanism available within HTML to organize and arrange the parts of a page. Several factors contributed to the flexibility that made tables attractive for this purpose:

• Table cells can contain virtually anything: paragraphs, headings, line breaks, logical divisions, horizontal rules, images, even other tables
• Table cells expand as necessary to accommodate whatever is placed within them
• Table cells can span multiple rows and/or columns, making it possible to create very complex arrangements of cells
• Several pages can be developed around a common structure provided by a table used for layout, generating a series of similar and consistent pages

However, tables are really not intended for this purpose: they are meant to be used for the presentation of data organized into rows and columns. As such, they are not ideal for page layout. They have several shortcomings when used for page layout:

• While the flexibility afforded by single cells spanning multiple rows or columns is helpful, tables are still fundamentally limited to an underlying grid-like arrangement of items, limiting their overall flexibility
• When tables are used for page layout, the page typically becomes useless to the user of any browser that is unable to display that underlying table
• Tables used for page layout do not provide any guidance for non-visual browsers and therefore they greatly limit accessibility
• Using tables for page layout can lead to delays in rendering, since the browser often must perform numerous calculations to determine the dimensions of each cell (especially when one table is nested inside the cell of another)

CSS is the currently preferred mechanism for page layout. It offers greater flexibility and accessibility. However, this use of CSS is not supported by all browsers currently in use. Therefore, many Web authors use tables today despite the recommendation of the standards to the contrary.

When a table is used for page layout. it is generally nested directly within the <body> element. Everything else within the page is then nested within the cells of the layout table. Therefore, when using a table for page layout is generally best to start with a sketch of what you want to achieve. Then, design a <table> element that will accommodate that design. And finally, once the table is complete, place the code to produce the different components of the page within the appropriate cells in that table.

Unfortunately, there is no way to provide a sample of a complete page using a table for its layout as a part of this page. There are, however, literally millions of pages on the Web that use this technique. Therefore, you should not need to look far to find as many examples as you care to examine.