HTML Reference Guide : TABLES

You are here: NetStrider » Tutorials » HTMLRef » TABLES »

TABLES
<CAPTION>	<COL>	<COLGROUP>	<TABLE>	<TBODY>
<TD>	<TFOOT>	<TH>	<THEAD>	<TR>

<<>><<>><<>><<>> Follow this link to see this document in FRAMES <<>><<>><<>><<>>

Introduction

Tables can be used to precisely position text and objects within an HTML Document. Tables consist basically of data cells, which consitiute the columns, arranged in defined rows. The number of rows and data cells within the rows determine the layout of the table. Table layout is remarkably similar to the layout of cells within an ordinary spreadsheet.

In addition to rows and data cells tables can also contain headers and a caption. The basic command structure for building a simple table is shown below:

Column A Column B Column C

Begin <TABLE>

Caption

<CAPTION> Table Caption </CAPTION>

Headers

<TR>

<TH>Hdr 1</TH> <TH>Hdr 2</TH> <TH>Hdr 3</TH>

</TR>

Row 1

<TR>

<TD>Cell A1</TD> <TD>Cell B1</TD> <TD>Cell C1</TD>

</TR>

Row 2

<TR>

<TD>Cell A2</TD> <TD>Cell B2</TD> <TD>Cell C2</TD>

</TR>

Row 3

<TR>

<TD>Cell A3</TD> <TD>Cell B3</TD> <TD>Cell C3</TD>

</TR>

End </TABLE>

This table consists of four defined rows. Note that one of the rows contains headers while the remaining three contain only data cells. The table also contains a caption.

When defining tables is is essential that the number of data cells within each row match precisely. The browser will always assume that the number of columns (data cells) within each row is constant. If a row has a larger or smaller number of columns (data cells) defined within it than do other rows, then the browser will adjust the entire table display in an effort to reconcile the discrepancy. This can produce some very odd results.

Tables can be designed, however, in a way that allows data cells to span either a number of rows or a number of columns. This maintains a constant number of data cells per row but accommodates merging of data cells to accomplish the kinds of effects shown below:

Examples of Tables with Merged Cells:

Cell One Spans Two Columns
Cell Two	Cell Three

Cell One Spans Two Rows	Cell Two
	Cell Three

Using advanced table formatting capabilities it is possible to produce almost any arrangement of text and images within an HTML Document. However, table data cells cannot yet be loaded dynamically independent of other data cells. All elements of a table constitute a single object and must load completely before the table can be displayed by the browser. Dynamic content changes within HTML Documents can only be accomplished using frames at present.

<CAPTION> Command

Command Syntax:
<CAPTION command parameters>
Table Caption
</CAPTION>
Sets a table caption. The caption will appear outside any borders set on the table.
See also: <TABLE>

Command Parameters:
align="left|right|center|top|bottom"
Where:

left -
aligns the caption to the left margin of the table

right -
aligns the caption to the right margin of the table

center -
centers caption on the table
Netscape Specific:

top -
places the caption above the table

bottom -
places the caption below the table

Internet Explorer Command Parameters:
valign="top | bottom"
Where:

top -
places the caption above the table

bottom -
places the caption below the table

Examples:
<CAPTION align="center">Table Caption</CAPTION>
Places the Table Caption above the table (by default) and centered over it.
<CAPTION align="bottom"><CENTER>Table Caption</CENTER></CAPTION>
Places the Table Caption below the table but the included <CENTER> command also permits it to be centered, as well, which would otherwise not be possible since only one alignment parameter is possible within the <CAPTION> command.

<COL> Command

Command Syntax:
<COL command parameters>
The <COL> command defines the characteristics of a <TABLE> column in the Internet Explorer browser.
See also: <COLGROUP>, <TABLE>.
Command Parameters:

align="left | right | center"
Where:

left -
horizontally aligns elements in all table data cells in the defined column to the left

right -
horizontally aligns elements in all table data cells in the defined column to the right

center -
horizontally aligns elements in all table data cells in the defined column to the center
span="integer"

Defines the number of columns that are affected by the formatting within the <COL> command.

Example:

<TABLE>
<COL align="left" span="2">
. . .
</TABLE>

Defines attributes for the first two columns in the table.

Elements in all table data cells in the columns are aligned to the left.

See also: <COLGROUP>.

<COLGROUP> Command

Command Syntax:
<COLGROUP command parameters>
The <COLGROUP> command defines the characteristics of a group of columns in a <TABLE> in the Internet Explorer browser.
See also: <COL>, <TABLE>.
Command Parameters:

align="left | right | center"
Where:

left -
horizontally aligns elements in all table data cells in the defined column to the left

right -
horizontally aligns elements in all table data cells in the defined column to the right

center -
horizontally aligns elements in all table data cells in the defined column to the center
valign="top | bottom | center"
Where:

top -
vertically aligns elements in all table data cells in the defined columns to the top

bottom -
vertically aligns elements in all table data cells in the defined columns to the bottom

center (middle) -
vertically aligns elements in all table data cells in the defined columns to the center

span="integer"

Defines the number of columns that are affected by the formatting within the <COLGROUP> command.

Example:

<TABLE>
<COLGROUP align="center" valign="center" span="5">
. . .
</TABLE>

Defines attributes for a group of five columns in the table.

Elements in all table data cells in the columns are aligned to the center horizontally and vertically.

See also: <COL>.

<TABLE> Command

Command Syntax:
<TABLE command parameters>
  <CAPTION>Caption</CAPTION>
  <TR command parameters>
    <TH command parameters>
      Header Cells
    </TH>
  </TR>
  <TR command parameters>
    <TD command parameters>
      Data Cells
    </TD>
  </TR>
</TABLE>
The <TABLE></TABLE> command tag pair enclose and define the global display characteristics for included table elements:

caption - <CAPTION>
table rows - <TR>
table headers - <TH>
table data cells - <TD>

Together these elements define a basic table.
See also: <CAPTION>, <TD>, <TH>, <TR>.
Internet Explorer Specific Table Commands:
<TBODY>, <TFOOT>, <THEAD>.

Command Parameters:

align="left | right | center"
Defines the alignment of the table where:

left - aligns the table to the left margin of the available display space.
right - aligns the table to the right margin of the available display space.
center - aligns the table at the center of the available display space.
These parameters only work in the more recent versions of the Netscape and Internet Explorer browsers. In order for alignment of tables to work in all browsers it is best to enclose the table within a <P> or a <CENTER> command element.
See also the valign parameter below.
border="pixels"
Defines width of the outer border of the table. The border width is expressed as a pixel value. A border value of 0 (the default) produces a table with no borders.
The border parameter forces borders on all cells within a table. The outer border takes on the width specified. All inner table borders are rendered by various browsers as one or two pixels wide, regardless.
The cellspacing parameter (below) is used to govern the gutter between individual table data cells.
The Internet Explorer browser also supports the frame and rules elements (below) which are also used to control border widths.

background="URL"
Defines the location of a background image for use globally within the table. The image will tile behind the table and obscure any underlying page background color or image. Obviously, this and the bgcolor parameter (below) are mutually exclusive.
bgcolor="color name | color value"
Defines the background color of the table expressed either as one of the named colors or as a hexadecimal color value.

bordercolor="color name | color value"
bordercolorlight="color name | color value"
bordercolordark="color name | color value"
Defines the color of the principal border or the highlighted and shaded sides, respectively, of the table external borders. Color can be expressed either as one of the named colors or as a hexadecimal color value.
Only Internet Explorer browser supports these parameters.

cellpadding="pixels"
Defines the amount of white space or standoff between the margin of the table data cells and the included text and/or objects. The standoff is expressed as a pixel value.
cellspacing="pixels"
Defines the amount of white space or gutter between table data cells. The gutter is expressed as a pixel value.

frame="value"
Defines the characteristics of the table borders, if they are set. Allowable values are:

above - displays the top external borders only
below - displays the bottom external borders only
box - displays all external borders as a box (default)
hsides - displays only the horizontal external borders
lhs - displays only the lefthand external borders
rhs - displays only the righthand external borders
void - removes all the external borders
vsides - displays only the vertical external borders

This parameter is used only in the Internet Explorer browser at present.
See also the rules parameter below.
height|width="% | pixels"
Defines the height and/or the width, respectively, of the table either as an absolute pixel value or as a percent of the available display width.
Using a percent allows the table to expand or contract depending on the user's screen resolution.
This is always safe with the width paramenter since available display width is always defined.
Using a percent in conjunction with the height parameter can cause curious display effects. The amount of available vertical display space may not be known to the browser unless the table is confined within a predefined space.
Using absolute pixel values forces precise placement and display of table elements but can result in tables which may have regions which lie outside the viewing area.

rules="value"
Defines the characteristics of the table internal borders or rules, if they are set. Allowable values are:

all - displays all the internal rules (default)
cols - displays vertical rules between columns only
groups - displays horizontal rules only between the <THEAD>, <TBODY> and <TFOOT> sections
rows - displays horizontal rules between rows only
none - supresses the display of all rules

This parameter is used only in the Internet Explorer browser at present.
See also the frame parameter above.
valign="top | bottom | center or middle"
Defines the vertical alignment of the table within the available display space. This can be useful in setting the location of the table with respect to text which may wrap alonside the table.
Clearly, the table must be enclosed within a predefined vertical display space in order for this command parameter to work properly.
See also the align parameter above.

Example Table Layout:

<table align=center width=60% cellpadding=2 cellspacing=2 border=4> <caption> Table Caption </caption> <tr> <th> </th> <th>Column A</th> <th>Column B</th> </tr> <tr> <th>Row 1</th> <td>Cell A1 </td> <td>Cell B1 </td> </tr> <tr> <th>Row 2</th> <td>Cell A2 </td> <td>Cell B2 </td> </tr> <tr> <th>Row 3</th> <td>Cell A3 </td> <td>Cell B3 </td> </tr> </table>
Yields -

Table Caption
Column A Column B

Row 1 Cell A1 Cell B1

Row 2 Cell A2 Cell B2

Row 3 Cell A3 Cell B3

Note that even without using any command parameters other than those within the basic table command, the browser is able to parse and display a reasonable table using defaults within the space available.

<TBODY> Command

Command Syntax:
<TBODY>
Table Body Segment
</TBODY>
Provides a container for the table body segment. Has no visible effect on the content of the table but allows special formatting of borders.
This command is interpreted only by the Internet Explorer browser.
See also: <TFOOT>, <THEAD>

Command Parameters: None.

Example:

<table rules=groups border=1>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Footer 1</th>
      <th>Footer 2</th>
    </tr>
  </tfoot>
</table>

Yields -

Header 1	Header 2
Cell 1	Cell 2
Footer 1	Footer 2

The table rules will display properly only in the Internet Explorer browser.

All other browsers will ignore the table segments commands and rules=basic parameter.

<TD> Command

Command Syntax:
<TD command parameters>
Data Cell Contents
</TD>
Defines a data cell within a table row. The number of data cells within a defined table row determines the number of columns that the row spans. All table rows must have the same number of data cells.
A table data cell is a world unto its own. Only default display characteristics for the entier document apply within any given cell. Any special formatting desired must be set up individually cell by cell within a table unless a style sheet is being used. At present only Internet Explorer browser supports the use of style sheets.
See also: <TABLE>

Command Parameters:

align="left | right | center or middle"

Where:

left -
aligns the content of the data cell to the left margin
right -
aligns the content of the data cell to the right margin
center -
centers the contents of the data cell horizontally within the cell

Example:

left

center

right

valign="top | bottom | center or middle"

Where:

top -
aligns the content of the data cell to the bottom margin
bottom -
aligns the content of the data cell to the top margin
center -
centers the contents of the data cell vertically within the cell

Example:

top

center

bottom

background="URL"

Loads an image at the provided URL as the background image for use in the table data cell.

Example:

Data Cell with
Background Image

nowrap

Prevents text from wrapping to fit the available width within a data cell.

Example:

This cell is set nowrap. Text in this cell can wrap.

Note the radical effect this has on table cell widths.

bgcolor="color name | color value"

Determines the background color to be used in the data cell. The default is transparent, i.e., the background color or background image displayed on the site will show through the table data cell.

Color is expressed either as a named color or as a hexadecimal color value.

Example:

bgcolor=
"red"

bgcolor=
"#FFFF00"

bordercolor="color name | color value"

Determines the color to be used to depict the borders of the data cell but only if the border attribute has been set within the <TABLE> command.

Color is expressed either as a named color or as a hexadecimal color value.

Example:

bordercolor=
"darkgreen"

bordercolor=
"#CC6600"

This attribute in interpreted only by the Internet Explorer browser.

bordercolordark="color name | color value"

Determines the color to be used to depict the highlighted side of the borders of the data cell but only if the border attribute has been set within the <TABLE> command.

Color is expressed either as a named color or as a hexadecimal color value.

bordercolorlight="color name | color value"

Determines the color to be used to depict the shaded side of the borders of the data cell but only if the border attribute has been set within the <TABLE> command.

Color is expressed either as a named color or as a hexadecimal color value.

Example:

bordercolorlight="lime"
bordercolordark="#003300"

These attributes are interpreted only by the Internet Explorer browser.

colspan|rowspan="integer"

Determines number of columns and/or rows, respectively, that the data cell will span.

If a cell spans two rows then the table row directly beneath it must have one less defined data cell to account for the spanned cell.

Example:

Spanned Cell 1 Row 1	Cell 2 Row 1
	Cell 1 Row 2

Row two contains only one defined cell.

Conversely, if a cell spans three columns and all other table rows have four columns defined then the row in which the spanned cell occurs can have only two cells, the spanned cell (which accounts for three of the columns) and one other.

Example:

Spanned Cell 1 Columns 1 & 2		Cell 2 Row 1
Cell 1 Row 2	Cell 2 Row 2	Cell 3 Row 2

Row one contains only two defined cells.

height|width="% | pixels"

Determines the height and/or width, respectively, of the table data cell.

Both height and width can be expressed as a percent of the available display space or as an absolute pixel value.

Using a percent to establish height can cause the browser trouble unless the table data cell is already contained within a space with a proscribed height. If a percent is used and the browser has no frame of reference by which to calculate a cogent percent of the available height the result can be odd because, unless otherwise defined, the amount of vertical space available is infinite.

There is no such trouble with horizontal space. Unless otherwise defined the limits of the display screen become the standard against which the browser will evaluate a request for some percent of the available display space.

Using absolute pixel values to determine height and/or width is far less problematic, except in the case where a request is made for a pixel value which exceeds the amount of display space available. In this case the browser will simply push the limit of the display space off screen and put up a horizontal or vertical scroll bar to allow the user to see the entire space, some of which lies out of the range of the viewable display area.

NOTE: Height and width parameters set for a single data cell affect the display of all other cells in the column and row in which the data cell belongs. The browser adjusts all cells within a row and within a column to have the same width and height, if at all possible.

Examples:

Examples are included above along with the command parameters.

The example code below shows a fully defined table data statement within a single-celled table:

          
<center>
<table width=90% border=2>
  <tr>
    <td align="center"
    valign="center"
    background="../images/tbk.gif"
    bgcolor="#EEEE00"
    width="33%"
    height="50">
    <font size=4 
    color="red">
    <b>
    Single Data Cell
    </b>
    </font>
    </td>
  </tr>
</table>
</center>

Yields -

Single Data Cell

The background and bgcolor attributes are mutually exclusive. Any background image masks the background color set within a data cell. The only reason to set a background color within a data cell which displays a background image is to provide a match for the dominant color of the background image while it loads, as was done here. Reload this frame now to see the effect.

<TFOOT> Command

Command Syntax:
<TFOOT>
Table Footer Segment
</TFOOT>
Provides a container for the table footer segment. Has no visible effect on the content of the table but allows special formatting of borders.
This command is interpreted only by the Internet Explorer browser.
See also: <TFOOT>, <THEAD>

Command Parameters: None.

Example:

<table rules=groups border=1>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Footer 1</th>
      <th>Footer 2</th>
    </tr>
  </tfoot>
</table>

Yields -

Header 1	Header 2
Cell 1	Cell 2
Footer 1	Footer 2

The table rules will display properly only in the Internet Explorer browser.

All other browsers will ignore the table segments commands and rules=basic parameter.

<TH> Command

Command Syntax:
<TH command parameters>
Header Cell Contents
</TH>
Defines a header cell within a row of table headers. Any text placed within a header cell is automatically bolded in most browsers.
See also: <TD>

Command Parameters:

All table header cell command attributes are identical with those used for the <TD> command.

Example:

<center>
<table width=90% 
 cellpadding=4
 cellspacing=0
 border=1>
  <tr>
    <th align=center 
        valign=center>
      <font size=3>
      Header One
      </font>
    </th>
    <th align=center 
        valign=center>
      <font size=3>
      Header Two
      </font>
    </th>
  </tr>

  <tr>
    <td align=center 
        valign=center>
      <font size=3>
      Cell One
      </font>
    </td>
    <td align=center 
        valign=center>
      <font size=3>
      Cell Two
      </font>
    </td>
  </tr>
</table>
</center>

Yields -

Header One	Header Two
Cell One	Cell Two

Note that the text within the table header cells is bolded even though the code above does not call for bolding. Note, also, that the command parameters used to define the table header cells and table data cells are identical. Both commands take the same parameter arguments.

<THEAD> Command

Command Syntax:
<THEAD>
Table Header Segment
</THEAD>
Provides a container for the table header segment. Has no visible effect on the content of the table but allows special formatting of borders.
This command is interpreted only by the Internet Explorer browser.
See also: <TBODY>, <TFOOT>

Command Parameters: None.

Example:

<table rules=groups border=1>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Footer 1</th>
      <th>Footer 2</th>
    </tr>
  </tfoot>
</table>

Yields -

Header 1	Header 2
Cell 1	Cell 2
Footer 1	Footer 2

The table rules will display properly only in the Internet Explorer browser.

All other browsers will ignore the table segments commands and rules=basic parameter.

<TR> Command

Command Syntax:

<TR command parameters>
  <TH>Header 1 Contents</TH>
  <TH>Header 2 Contents</TH>
  . . .
</TR> <TR command parameters>
  <TD>Cell 1 Contents</TD>
  <TD>Cell 2 Contents</TD>
  . . .
</TR>

Defines a table row. A table row can consist of header or data cells. Generally these element types are not mixed within a table row.
Although the <TR> can make use of command attributes identical to those used for the <TD> and <TH> commands, parameters are generally not set at the table row level.
See also: <TD>, <TH>.

Command Parameters:

Table row command attributes are identical with those used for the <TD> command except that a more limited set is permitted.

Allowable command parameters are:

align|valign and bgcolor.

Internet Explorer specific command parameters -

bordercolor, bordercolorlight and bordercolordark.

Example:

<center>
<table width=90% 
 cellpadding=4
 cellspacing=0
 border=1>
  <tr>
    <th align=center 
        valign=center>
      <font size=3>
      Header One
      </font>
    </th>
    <th align=center 
        valign=center>
      <font size=3>
      Header Two
      </font>
    </th>
  </tr>

  <tr>
    <td align=center 
        valign=center>
      <font size=3>
      Cell One
      </font>
    </td>
    <td align=center 
        valign=center>
      <font size=3>
      Cell Two
      </font>
    </td>
  </tr>
</table>
</center>

Yields -

Header One	Header Two
Cell One	Cell Two

Two table rows are defined in the table above. One contains header cells and the other contains data cells. The number of elements within all table rows must match precisely in order for the browser to display the table properly.

Note that no command parameters are set for either table row element.

HTML Reference Guide Table of Contents.