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:

Table and Cell Borders

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.

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 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.

Nested Tables

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.

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, 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.