Tabular arrangements of data into rows and columns can help the viewer sort through
masses of data to understand their underlying structure and content. So, tables are useful
devices for presentation of information in a meaningful form. At the same time, tables can
be used to structure the layout of a Web page regardless of its content. You can produce a
variety of page designs simply by the designing different table structures into which your
page information will fit. In short, tables are important presentation devices, and you need
to know as much as you can about how to use them.
A Simple Table
A Web table, like any other tabular presentation, contains rows and columns, the intersections
of which are the cells of the table into which information is placed. A simple 3 x 3 table is shown
The rows, columns, and cell intersections of a table are defined with three basic tags.
<table>...</table> tags surround the entire table
description; <tr>...</tr> (table row) tags defined
the rows of the table; and <td>...</td> (table data)
tags define the cells, or columns, that appear in each row. The <td>
tag encloses the content that appears in the cell. The relationships between these tags used to
create the above table are shown shown below:
By default, table tags produce no borders around the table or around its cells. The above code
actually creates the table layout shown at the right. Data are aligned within rows and columns;
however, no borders are displayed. In certain cases you may not wish to display table borders; in
most cases you will. Therefore, style sheets must be applied to the table and to its cells to display
borders around both.
The code shown below produces the bordered table shown at the right.
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 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
<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.
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 these 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 in later tutorials.
Tables can be nested; that is, tables can appear within cells of a table. This doesn't 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
accompanying table and XHTML code.
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, 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.
The following two tables, for example, 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.
The style sheet for these two tables is shown below:
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 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.