Tables

Tables can be used for many purposes including, but not limited to, controlling the placement of text and graphics on the screen or giving a border to a picture.

<TABLE>		This tag begins a table.
</TABLE>		This tag ends a table.

A table's border may be turned off by placing a zero after the border attribute.

The border width may be controlled. The number after the border attribute determines the border width in pixels.

<TABLE BORDER=0>		This is a table tag with the border turned off.
<TABLE BORDER=5>		This table tag provides a border five pixels wide.
<TABLE BORDER=20>		This table tag provides a border twenty pixels wide.

Other table attributes are cellpadding and cellspacing. You do not have to add these attributes. Cellpadding increases the size of the cell by increasing the inside of the cell. Cellspacing adds space between cells and increases the size of the cell by extending the inside width of the border. Both cellspacing and cellpadding are measured in pixels.

<TABLE BORDER=# CELLSPACING=# CELLPADDING=#>

Example

<TABLE BORDER=7 CELLSPACING=3 CELLPADDING=5>

The table tag above will produce a table with a border seven pixels wide, the inside border increased by three pixels and the cell size increased another five pixels.

Essential tags for creating a table:

<TR>

This is the tag that begins a row.

</TR>

This is the tag that ends a row.

<TH>

This is the tag that begins a cell with heading format.

</TH>

This is the tag that ends a cell with heading format.

<TD>

This is the tag that begins a cell with regular format.

</TD>

This is the tag that ends a cell with regular format.

The heading format provided by the <TH> tag centers the cell's contents and has bold print. Contents between the <TD> tags will be aligned to the left and will have plain text.

The table, like other codes and text, appears between the <BODY> tags. When creating tables it helps to indent, space, and use comments to clearly show what you are doing.

<!Begin Table>

<TR> <! Begin row 1>

<TH>Cell 1, Row 1 </TH><! TH = heading format>
<TH>Cell 2, Row 1 </TH>
<TH>Cell 3, Row 1 </TH>
<TH>Cell 4, Row 1 </TH>

</TR> <! End row 1>

<TR> <! Begin row 2>

<TD>Cell 1, Row 2 </TD><! TD = regular format>
<TD>Cell 2, Row 2 </TD>
<TD>Cell 3, Row 2 </TD>
<TD>Cell 4, Row 2 </TD>

</TR> <! End row 2>

<TR> <! Begin row 3>

<TD>Cell 1, Row 3 </TD><! TD = regular format>
<TD>Cell 2, Row 3 </TD>
<TD>Cell 3, Row 3 </TD>
<TD>Cell 4, Row 3 </TD>

</TR> <! End row 3>

</TABLE>

<!End Table>
</CENTER>

Here is the table produced from the HTML script above:

Cell 1, Row 1	Cell 2, Row 1	Cell 3, Row 1	Cell 4, Row 1
Cell 1, Row 2	Cell 2, Row 2	Cell 3, Row 2	Cell 4, Row 2
Cell 1, Row 3	Cell 2, Row 3	Cell 3, Row 3	Cell 4, Row 3

Tables are versatile. You can put text, graphics, and other code inside each cell. You can even put another table inside a cell! If you want a cell to be the width of two, three, or more cells, you can use the COLSPAN attribute inside the <TH> and <TD> tags. If you want a cell to be the length of two, three, or more cells, you can use the ROWSPAN attribute inside the <TH> and <TD> tags.

<TD COLSPAN=4>		This tag creates a cell four columns wide.
<TH ROWSPAN=3>		This tag creates a cell three rows tall.
<TD COLSPAN=2 ROWSPAN=4>		This tag creates a cell two columns wide and four rows tall.

Here is an example of a table with COLSPAN and ROWSPAN attributes used so as to create a large space in the middle of the table:

<!Begin Table>

<TR> <! Begin row 1>

<TH>Cell 1, Row 1 </TH><! TH = heading format>
<TH>Cell 2, Row 1 </TH>
<TH>Cell 3, Row 1 </TH>
<TH>Cell 4, Row 1 </TH>

</TR> <! End row 1>

<TR> <! Begin row 2>

<TD>Cell 1, Row 2 </TD><! TD = regular format>

<TD COLSPAN=2 ROWSPAN=2>Cell 2, Rows 2 & 3</TD>
<! 2 cells across & 2 rows down>

<TD>Cell 3, Row 2 </TD>

</TR> <! End row 2>

<TR> <! Begin row 3>

<TD>Cell 1, Row 3 </TD><! TD = regular format>
<TD>Cell 3, Row 3 </TD>

</TR> <! End row 3>

<TR> <! Begin row 4>

<TD>Cell 1, Row 4 </TD><! TD = regular format>
<TD>Cell 2, Row 4 </TD>
<TD>Cell 3, Row 4 </TD>
<TD>Cell 4, Row 4 </TD>

</TR> <! End row 4>

</TABLE>

<!End Table>
</CENTER>

The HTML code above produces a table like the one below:

Cell 1, Row 1	Cell 2, Row 1	Cell 3, Row 1	Cell 4, Row 1
Cell 1, Row 2	Cell 2, Rows 2 & 3		Cell 3, Row 2
Cell 1, Row 3	Cell 2, Rows 2 & 3		Cell 3, Row 3
Cell 1, Row 4	Cell 2, Row 4	Cell 3, Row 4	Cell 4, Row 4

HTML Tutorial Table of Contents
Beginning your HTML Document/ Simple HTML Tags
Simple Anchors & Links/ The Hexadecimal System/ Wallpaper & Colors
Gathering Graphics for Your Web Page / Adding Graphics & Graphic Links / Tables / Forms
Frames/ Image Maps