Logo

 

 

Tables were originally invented as an organized way to display information. They consist of gridlines and look similar to a spreadsheet. Tables are now commonly used to control the layout of a page, as well as organize data. Tables make it possible to split an entire page into different columns. Many search engines do this.



Table HTML


Tables are created with the <TABLE></TABLE> tags. The rows of the table are created with <TR></TR> tags. The columns within these rows are made with <TD> and </TD>. The information for the table goes between the <TD> and </TD> tags. A new column is made by putting a new pair of these <TD> tags in the same row. This sequence continues until the table is done.

Here is an example of a 3 column, three row table:

<TABLE border=1>
<TR><TD>column 1</TD><TD>column 2</TD><TD>column 3</TD></TR>
<TR><TD>r2 c1 data</TD><TD>r2 c2 data</TD><TD>r2 c3 data</TD></TR>
<TR><TD>r3 c1 data</TD><TD>r3 c2 data</TD><TD>r3 c3 data</TD></TR>
</TABLE>

Result:

column 1column 2column 3
r2 c1 datar2 c2 datar2 c3 data
r3 c1 datar3 c2 datar3 c3 data


The table properties that can go within the <TABLE> tag include:

WIDTH The width of the table (%, px, cm, or in).
BGCOLOR The background color for the table (in hexadecimal).
BORDER The thickness of the table's border (0 for no border).
CELLSPACING The distance (in pixels) of the table gridlines from the table data.
CELLPADDING The width (in pixels) of the table gridlines.


The attributes that can go within the <TR> tag:

BGCOLOR The background color for the row (in hexadecimal).
ALIGN The alignment for the row data (ie. left, right, center).


The attributes that can go within the <TD> tag:

WIDTH The width of the column (%, px, cm, or in).
BGCOLOR The background color for the cell (in hexadecimal).
ALIGN The alignment for the cell data (ie. left, right, center).
COLSPAN The number of columns for the single cell to span.


The font color and size for the table can also be changed, but each cell must be changed separately and ended before the </TD> tag. Images can be used in tables just as text is.


Here is an example of a web site that uses tables with the borders turned off and on.

Home page

This page was created by Scott Andersen, Eric Schroeder, and Drew Viersen.