A Complete Guide to Web Design

178 Chapter 10 – Tables

Basic Table Structure

Web Design in a Nutshell, eMatter Edition

<TABLE>

<TR>

<TD>cell 1</TD><TD>cell 2</TD>

</TR>

<TR>

<TD>cell 3</TD><TD>cell 4</TD>

</TR>

</TABLE>

The<table>tag defines the contents of the table. Each row is defined by<tr>

tags, and is made up of a number of data (or header) cells. The number of

columns is defined by the number of cells in a row. Data cells are indicated by the

<td>tag. A table cell may contain any data that can be displayed in an HTML

document (formatted text, images, multimedia elements, and even other tables).

Figure 10-1 gives a visual representation of this concept. The image on the left

shows that the table consists of two rows and that each consists of two cells. The

image on the right shows just how the HTML describes the rows and cells.

Header cells use the <th>tag and function the same as data cells but are

displayed in bold centered text. You may also add a caption to the table (using the

<caption>tag), which provides a title or brief description of the table. The

<caption>tag should be placed before the first row of the table; be sure that it is

outside the row containers. Because tables are so often used as layout devices

only, the caption feature is less used than the other main table components.

Table level controls

At the table level (using attributes within the<table>tag outlined above), you

can control:

• the width of the table and its position on the page


• the color of all its cells


• the thickness of the border


• the spacing within and between cells (using cellpadding and cellspacing,
  respectively)

Figure 10-1: HTML tables are divided into rows and cells, as shown at left. The <tr>

tag creates rows and the <td> tag creates cells, as shown at right.

Table

cell 1 cell 2

cell 3 cell 4

<TABLE>

<TR> <TD> </TD> </TR>

<TR> <TD> </TD>

<TD> </TD>

<TD> </TD> </TR>

</TABLE>