Writing for the Web

---

Print-Friendly Page
Authors & Contributors

Just as they do in paper documents, tables provide an effective means of presenting information on a Web page. In addition, tables can be used to layout a Web page in a manner that would be impossible using only text formatting and page layout tags. For instance, you could use a table to run a title across the top of a page, display a photo along the left side of the page, and run a column of text on the right side of the page. (For the most precise page layout control, however, see the coding primer, Using Cascading Style Sheets.)

To understand how to create a table using HTML tags, you need to understand the <TABLE>, <TR>, and <TD>tags. (Each of these tags is discussed in detail below.) You can use other tags to control the layout and appearance of tables, such as the <TH>, <THEAD>, <TBODY>, and <TFOOT> tags, but to create effective tables you need only know these three tags. Below, we'll discuss the general layouts of simple and complex tables, then focus on specific attributes you can use with the <TABLE>, <TR>, and <TD> tags.

General Layout of a Simple Table

Consider the following table:

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6
Cell 7	Cell 8	Cell 9

The HTML code that generates this table follows:

<table border="1" width="100%">

<tr>

   <td>Cell 1</td>

   <td>Cell 2</td>

   <td>Cell 3</td>

</tr>

<tr>

   <td>Cell 4</td>

   <td>Cell 5</td>

   <td>Cell 6</td>

</tr>

<tr>

   <td>Cell 7</td>

   <td>Cell 8</td>

   <td>Cell 9</td>

</tr>

</table>

As you can see, the three tags work together to create the table. <TABLE> indicates the start of the table and, in this example, uses two attributes (BORDER, which specifies the width of the border, and WIDTH, which specifies the width of the table) to control the appearance of the table. <TR>, or Table Row, indicates the start of a row in the table. <TD>, or Table Data, indicates the start of a cell in the table. Each of these tags, in turn, is closed.

General Layout of a Complex Table

Consider the following table:

Cell 1	Cell 2	Cell 3
Cell 4		Cell 5
Cell 6		Cell 7

The HTML code that generates this table follows (note the code displayed in red):

<table border="1" width="100%">

<tr>

   <td>Cell 1</td>

   <td rowspan="2">Cell 2</td>

   <td>Cell 3</td>

</tr>

<tr>

   <td>Cell 4</td>

   <td>Cell 5</td>

</tr>

<tr>  

   <td colspan="2">Cell 6</td>

   <td>Cell 7</td>

</tr>

</table>

In this table, cells 2 and 6 have been modified using the ROWSPAN and COLSPAN (row span and column span) attributes. Essentially, ROWSPAN defines how many rows the column should span, while COLSPAN defines how many columns a cell should span.

Before we turn to discussions of specific attributes for the <TABLE>, <TR>, and <TD> tags, let's look at another aspect of using tables: nesting tables within tables.

Nesting Tables Within Tables

Consider the following table:

	Interesting things about Warning Labels. Everything you ever wanted to know about GIF images. Icons as a new way of understanding the cosmos. Should we worry about the messages icons are sending our kids?
Note how the image is displayed above and a table containing additional information is displayed to the right.

The HTML code that generates this table follows (note the code displayed in red):

<table border="5" width="100%">

<tr>

   <td><img src="images/misc/warning.gif" alt="Warning"></td>

   <td rowspan="2">

      <table cellspacing="2" cellpadding="2" border="1">

      <tr>

         <td>Interesting things about Warning Labels.</td>

         <td>Everything you ever wanted to know about GIF images.</td>

      </tr>

      <tr>

         <td>Icons as a new way of understanding the cosmos.</td>

         <td>Should we worry about the messages icons are
		 sending our kids?</td>

      </tr>

      </table>

   </td>

</tr>

<tr>

   <td>Note how the image is displayed above and a table 
   containing additional information is displayed to the right.</td>

</tr>

</table>

In this example, the table uses the ROWSPAN attributes to modify the far right column into a single cell. Then it inserts a table into that cell. The BORDER attributes for the main table and inserted table are 5 and 1, respectively, making the overall border of the table heavier than that of the inserted table.

The <TABLE> Tag

The <TABLE> tag is used to start and end a table. If you do not close the tag using </TABLE> some browsers (notably Netscape Navigator) will not display any of the information that has been placed in the table cells. It's essential, as a result, that you close your tables with the </TABLE> tag.

The attributes for the <TABLE> tag allow you to define the border of the table, the width of the table in pixels or percentages, the height of the table in pixels or percentages, the spacing between cells, the spacing between cell borders and the contents of the cells, the horizontal and vertical alignment of the table, the background color of the table, and the background image of the table. Additional attributes, such as border color, can also be set, but they are not supported by one of the leading browsers. Examples of these attributes are found below:

Attribute	Definition and Values
BORDER	Sets the border of the table. The default is no border. Values start at 0 (no border) and go up, e.g., BORDER="3"
WIDTH	Sets the width of the table. The default is the minimum width needed to display the contents of the table. The width can be set to percentages of the window or pixels, e.g., WIDTH="80%" or WIDTH="600"
HEIGHT	Sets the height of the table. The default is the minimum height needed to display the contents of the table. The width can be set to percentages of the window or pixels, e.g., HEIGHT="70%" or HEIGHT="150"
CELLSPACING	Sets the spacing between cells. The default is 2. Values start at 0 (the most compact table) and go up, e.g., CELLSPACING="5"
CELLPADDING	Sets the spacing between the cell walls and the content of the cells (e.g., an image or text). The default is 1. Values start at 0 (the most compact table) and go up, e.g., CELLPADDING="15"
ALIGN	The horizontal alignment of a table on a page. The default is left. Values are right and left, e.g., ALIGN="RIGHT"
VALIGN	The vertical alignment of the text or images in a table. The default is center. Values are top, bottom, and center, e.g., VALIGN="TOP"
BGCOLOR	The background color of a table. The default is the background color of the page. Values can be color names (e.g., BGCOLOR="WHITE") or hexadecimal values (e.g., BGCOLOR="#FFFFFF").
BACKGROUND	The background image displayed in the table. The default is the background image of the page, if any. Values are the name and location of an image file, e.g., BACKGROUND="brick.gif"
SUMMARY	Provides a summary of information in the table for nonvisual browsers.
HSPACE	Sets the amount of white space, in pixels, to the left and right of the table.
VSPACE	Sets the amount of white space, in pixels, above and below the table.

The <TR> Tag

The <TR> tag is used to start and end a row in a table. The attributes for the <TR> tag allow you to define the horizontal and vertical alignment of the row, the background color of the row, and the background image of the row. Additional attributes, such as border color, can also be set, but they are not supported by one of the leading browsers.

A key aspect of these attributes is that they will override the values set for the table as a whole. Thus, you can make the background color of the table as a whole red and make the background color of a particular row blue. Similarly, the values for table cells, see below, will override the values for both the table as a whole and the row in which it appears.

Examples of row attributes are found below:

Attribute	Definition and Values
ALIGN	The horizontal alignment of cells in a row. The default is left. Values are right, center, and left, e.g., ALIGN="RIGHT"
VALIGN	The vertical alignment of the text or images in cells in a row. The default is center. Values are top, bottom, middle, and baseline, e.g., VALIGN="TOP"
BGCOLOR	The background color of a row. The default is the background color of the table or, if that has not been set, of the page. Values can be color names (e.g., BGCOLOR="WHITE") or hexadecimal values (e.g., BGCOLOR="#FFFFFF").
BACKGROUND	The background image displayed in the row. The default is the background image of the table or, if that has not been set, of the page, if one has been set. Values are the name and location of an image file, e.g., BACKGROUND="brick.gif"

The <TD> Tag

The <TD> tag is used to start and end a cell in a table. The attributes for the <TD> tag allow you to define the width of the cell in pixels or percentages, the height of the cell in pixels or percentages, the horizontal and vertical alignment of the contents of the cell, the background color of the cell, and the background image of the cell. Additional attributes, such as border color, can also be set, but they are not supported by one of the leading browsers.

A key aspect of these attributes is that they will override the values set for the table as a whole and for the row in which the cell appears. Thus, you can make the background color of the table as a whole red, the background color of a particular row blue, and the background color of a cell appearing in that row yellow (assuming, of course, that you found this color combination appealing).

Examples of cell attributes are found below:

Attribute	Definition and Values
WIDTH	Sets the width of the cell. The default is the minimum width needed to display the contents of the cell. The width can be set to percentages of the table or to pixels, e.g., WIDTH="80%" or WIDTH= "400". Since the column width can only be a single value, it is best to set this value for one cell and leave the width of the rest of the cells in that column undefined. Note: If you set the width of the cell using percentage values, Netscape will only recognize the setting if the WIDTH attribute is also set as a percentage value for the entire table. (Yes, I know this is confusing.)
HEIGHT	Sets the height of the cell. The default is the minimum height needed to display the contents of the cell. The width can be set to percentages of the table or pixels, e.g., HEIGHT="70%" or HEIGHT= "150". Since the row height can only be a single value, it is best to set this value for one cell and leave the height of the rest of the cells in that row undefined. Note: Netscape supports only the percentage value for setting height. It does not recognize height settings if they are set in pixels.
ALIGN	The horizontal alignment of the contents of a cell. The default is left. Values are right, center, and left, e.g., ALIGN="RIGHT".
VALIGN	The vertical alignment of the contents of a cell. The default is center. Values are top, bottom, middle, and baseline, e.g., VALIGN="TOP".
ROWSPAN	The number of rows a cell spans. The default value is 1. Values start at 1 and go up, depending on the number of rows in a table, e.g., ROWSPAN="3"
COLSPAN	The number of columns a cell spans. The default value is 1. Values start at 1 and go up, depending on the number of rows in a table, e.g., COLSPAN="2"
NOWRAP	Tells the table not to wrap the text in a cell. Setting this option can result in wide columns.
BGCOLOR	The background color of a cell. The default is the background color of the row or table, if any. Values can be color names (e.g., BGCOLOR="WHITE") or hexadecimal values (e.g., BGCOLOR="#FFFFFF").
BACKGROUND	The background image displayed in the cell. The default is the background image of the row or page, if any. Values are the name and location of an image file, e.g., BACKGROUND="brick.gif"

Links Page: Learn more about HTML on the HTML links page. Coding Primer: Many Web authors use tables to control the layout of their pages. In the most recent browsers, however, the most effective way to control page layout involves the use of Cascading Style Sheets. You can read more about Cascading Style Sheets in Using Cascading Style Sheets.