Tables - basics

HTML - Tables

This page demonstrates the use of tables. See Dynamic vs. Fixed for an article on setting up tables.

Tables are composed of rows and columns. The intersection of a row and column is called a cell.

Features
	Anything can be put into a cell that can be put into the BODY of a HTML document - images, links, <HR>, or another table
	The table and/or individual cells can be aligned
	The size of borders, margins, and the color of cells and/or the table can be specified.

Sample Code

This code

<TABLE WIDTH=50% BORDER=5 BGCOLOR="fcac66">
<CAPTION ALIGN=BOTTOM> Example Table</CAPTION>
<TR>
<TD>Row 1, col 1</TD><TD>Row 1, col 2</TD> </TR>
<TR>
<TD>Row 2, col 1</TD><TD>Row 2, col 2</TD> </TR>
</TABLE>

generates the table:

Example Table
Row 1, col 1	Row 1, col 2
Row 2, col 1	Row 2, col 2

Attributes

The basic terms: Table layout

<TABLE>

BGCOLOR	This specifies the color of the table
WIDTH	This specifies the table width in pixels or as % of the page
ALIGN	This allows text to flow around the table; default is CENTER; other options are LEFT or RIGHT
BORDER	This sets the thickness of the border. The default is 1 pixel; using BORDER=0 makes the border invisible.
CELLSPACING	This specifies the number of pixels between cells and between cells and the border. The default is 2.
CELLPADDING	This specifies the number of pixels between cell data and the cell border. The default is 1.
HSPACE	This specifies the number of pixels to the left and right of the table. This attribute is not recognized unless ALIGN is used.
VSPACE	This specifies the number of pixels above and below the table. This attribute is used with ALIGN.
VALIGN	This attribute sets the vertical alignment of all cells in the table.

<TR>

ALIGN	This determines the horizontal alignment of data in the cells within this row. The options are LEFT, RIGHT, or CENTER (default).
BGCOLOR	This specifies the color of the cells in the row.
VALIGN	This attribute aligns data vertically within cells of the row. The options are TOP, BOTTOM, BASELINE, and CENTER (default).

<TD>, <TH>

ALIGN	This determines the horizontal alignment of data within this cell. The options are LEFT, RIGHT, or CENTER (default).
BGCOLOR	This specifies the color of this cell.
VALIGN	This attribute aligns data vertically within this cell. The options are TOP, BOTTOM, BASELINE, and CENTER (default).
WIDTH	This specifies the width of the cell. One can use either absolute pixels or a % of the table.
COLSPAN	This allows the cell to span more than one column.
ROWSPAN	This allows a cell to span more than one row.

<CAPTION>

ALIGN	Netscape uses this attribute to place caption above or below the table. The default is above; use BOTTOM to place below. Internet Explorer uses the ALIGN attribute to horizontially position the caption: the options are LEFT, RIGHT, or CENTER.
VALIGN	Internet Explorer uses this attribute with values TOP (default) or BOTTOM to place the caption above or below the table.

Important Note
	The order of precedence of attribute is that cells have precedence over row attributes and row attributes have precedence over table attributes.

Example of multiple spanning rows and columns

The table

This spans 2 rows	1 Col wide	This spans 2 cols
	Row 2, col 2	Row 2, col 3	Row 2, col 4

is generated by the source code:

<TABLE WIDTH=50% BORDER >
<TR>
<TD ROWSPAN=2>This spans 2 rows</TD>
<TD>1 Col wide</TD>
<TD COLSPAN=2>This spans 2 cols</TD>
</TR>
<TR>
<TD>Row 2, col 2</TD>
<TD>Row 2, col 3</TD>
<TD>Row 2, col 4</TD> </TR>
</TABLE>

Making an image with a table

Large images can be loaded by chopping into pieces which are placed into the cells of a table. As a simple example the following code produces an image built from a table with two rows.

View the result.