Creating Tables
Tabular arrangements of data into rows and columns can help the viewer sort
through masses of data to understand their underlying structure and content.
Therefore, tables are useful devices for presentation of information in a meaningful
form. At the same time, tables have historically been used to structure the layout
of a Web page; however, this approach is becoming deprecated in favor of CSS-based
layouts. In short, tables are important presentation devices and should be used to
present tabular data. They should not be used to define the layout of a Web page.
The <pre> Tag
Previously you were introduced to the <pre> tag as one method
for arranging data into rows and columns for tabular presentation. A block of text
surrounded by the <pre> tag is displayed in a monospace font in
precisely the way it is typed in the text editor. The tag is often used to create
simple tables where alignment of columns is produced with embedded blank spaces.
For example, the following editor code shows a table produced by using the keyboard
Enter key to create separate rows, and the Space Bar key to align columns of data.
This table layout appears on a Web page in exactly the format it is typed inside the
<pre> tags.
<pre>
Table 1
Sales by Region
----------------------------------------------
Region/Year 2000 2001 2002 2003
----------------------------------------------
East 35.2 37.4 39.8 40.0
West 28.0 25.6 27.4 29.8
South 102.3 86.1 98.6 100.2
North 10.5 8.6 9.8 10.4
----------------------------------------------
</pre>
Listing 8-1. Code to create a table using the <pre> tag.
This method provides limited capabilities for arranging and styling a table.
It is useful only for producing fairly simple tables without the need for
styling it in conformance with the overall page design. A better method is to
construct tables using special HTML tags designed for that purpose.
A Simple Table
Like any other tabular presentation, a table produced with HTML table tags
contains rows and columns. The intersections of these rows and columns form
the cells of the table. Information can then be placed into
these cells. A simple 3 x 3 table is shown in Figure 8-1.
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
Figure 8-1. A 3 x 3 table.
The rows, columns, and cell intersections of a table are defined with three
basic tags. A <table> tag surrounds the entire table
description; <tr> (table row) tags defined the rows of
the table; and <td> (table data) tags define the cells,
or columns, that appear along each row. The <td> tag
encloses the content that appears in a cell. These tags are shown in their
general structural formats in Figure 8.2.
<table>
<tr>
<td>cell content</td>
<td>cell content</td>
...
</tr>
...
</table> |
Figure 8-2. General formats for basic table tags.
There are as many <tr> tags as there are rows in the table,
and there are as many <td> tags as there are cells (columns) in
each row. When building tables, you need to be cautious about properly pairing
opening and closing tags. One minor oversight, and the table arrangement can
be totally disrupted. Also, take care to organize your coding so that the
table structure is clearly evident. For example, the following code is used
to create the table shown above in Figure 8.1.
<table>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Listing 8-2. Code to create a 3 x 3 table.
Note that <table>, <tr>, and
<td> tags are container tags that all require both an opening
and closing tag. The <table> tag encloses all coding for the
table; <tr> tags enclose each row of the table;
<td> tags enclose each cell of a table row.
The code in Listing 8-2 is arranged in a line-by-line hierarchy of tags
suggestive of the structure of the table. This manner of coding is helpful
in visualizing the table, although you can code table tags in free-format style,
like any other HTML coding. For instance, the above table displays correctly coded
in the following fashion.
<table>
<tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr>
<tr><td>Cell 3.1</td><td>Cell 3.2</td><td>Cell 3.3</td></tr>
</table>
Listing 8-3. Alternate code to create a 3 x 3 table.
However, since table cells (<td>...</td>) can
enclose information of varying length and complexity, it is best to code them on
separate lines as in Listing 8-2 for more accurate visualization and typing of cell
contents.
The table below presents a summary of the HTML tags used for creating tables by
discussing what was covered in this tutorial.
| Tag |
Description |
| table | Defines a table. All other table elements are coded within this element. |
| tr | Defines a table row. |
| td | Defines a table data cell within a row. |
| th | Defines a table header cell within a row. |
| caption | Contains a description of the table. The element must be coded immediately after the opening table tag. |
| thead | Groups one or more rows or tr elements into a table header. |
| tfooter | Groups one or more rows or tr elements into a table footer. |
| tbody | Groups one or more rows or tr elements between the header and footer into a table body. |
Table and Cell Borders
By default, table tags produce no borders around the table or around its cells.
The code in Listing 8-2 and 8-3 actually create the table layout shown below in
Figure 8-3. Data are aligned within rows and columns; however, no borders are
displayed. In certain cases, you may not wish to display table borders, but in
most cases you will. Therefore, style sheets must be applied to the table and to
its cells to display borders around both.
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
Figure 8-3. A standard 3 x 3 table.
A style sheet is applied to the table and to its cells to display borders around
both. A border surrounds the entire table by styling the <table> tag.
Borders surround individual cells by styling the <td> tag. The code
below produces the bordered table shown in Figure 8.1. The entire table is surrounded
by a 1-pixel outset border and each of the cells is surrounded by a 1-pixel inset border.
This styling is typical for a standard HTML table.
<style type="text/css">
table {border:outset 1px;}
td {border:inset 1px;}
</style>
<table>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Listing 8-4. Code to create a bordered 3 x 3 table.
An embedded style sheet is the most convenient method of styling table elements.
In-line style sheets can be used; however, individual style sheets would have
to appear in each of the many <td> tags. It is much
easier declaring embedded styling for table and td selectors. Tables can have
any style of outer borders, and cells can have there own border styles. Border
styling is covered in a following tutorial.
Table Size
By default, the size of a table depends on the size of the data appearing in its
cells. A column is as wide as the widest entry in the column. All rows are as
wide as the combined width of data within the widest cells. In effect, table
cells collapse around the data they contain. Although it is not apparent in the
above examples, data are aligned horizontally left and vertically centered
within the cells. Style settings to manage table and cell sizes and data
alignment are described later in this tutorial.
Nested Tables
Tables can be nested; that is, a table can appear inside a cell of another
table. This arrangement does not involve any particular coding complication,
Table specifications are simply inserted as contents of a cell. The cell expands
in size to permit full display of the nested table as shown in the following table
and HTML code.
| Cell 1 |
Cell 2 |
| Cell 3 |
| Cell A |
Cell B |
| Cell C |
Cell D |
|
Figure 8-4. Nested tables.
<style type="text/css">
table {border:outset 1px;}
td {border:inset 1px;}
</style>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>
<table>
<tr>
<td>Cell A</td>
<td>Cell B></td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>
</td>
</tr>
</table>
Listing 8-5. Code for nested tables.
In this example, you can also see the default alignment of data within cells.
Notice in "Cell 2" that the entry is horizontally aligned at the left of the
cell; in "Cell 3" the entry is vertically aligned in the middle of the cell.
Styling Multiple Tables
Since tables provide one of the most effective methods for arranging content
on a Web page, it is often the case that a single page contains two or more
tables that are either nested tables or multiple tables containing different
data content. It is also often the case that these tables need to be styled
differently. Therefore, the embedded style sheet must differentiate among the
tables so that each can have its own special styling.
Recall from earlier discussions that page elements can be assigned id values to
uniquely identify them. These ids are then used in the embedded style sheet to
indicate which styles pertain to which unique elements. This technique can be
used to apply different styles to different tables on the same page.
For example, the two tables in Figure 8-5 have different border styles and sizes.
The first table is styled with standard borders; the second table uses the outset
style for both table and cell borders and uses different border widths.
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
Figure 8-5. Styling multiple tables on the same page.
The style sheet and table definitions for these two tables are shown in Listing 8-6.
<style type="text/css">
table#Table1 {border:outset 1px;}
table#Table1 td {border:inset 1px;}
table#Table2 {border:outset 3px;}
table#Table2 td {border:outset 2px;}
</style>
<table id="Table1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<table id="Table2">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Listing 8-6. Code to style multiple tables on the same page.
ID selectors are used to separately style the <table> tags for
the two tables. Contextual selectors are used to style their <td>
tags. In this way, any number of tables can take on different styles without styling
conflicts. (See tutorial "Applying Special Styles" for a review of ID selectors;
see "Contextual Selectors" to review these style selectors.)
This introduction to tables has given you a general overview of tables and style
sheet approaches to styling them. The following tutorials cover detailed aspects
of table design and formatting.