[Contents] [Previous] [Next] [Alphabetical Tag List] [Index]

HTML Tag Reference

Tables

This section discusses the tags for creating tables.


TABLE

(table)

The TABLE tag defines a table. Inside the TABLE tag, use the TR tag to define rows in the table, use the TH tag to define row or column headings, and use the TD tag to define table cells. Navigator 1.1

The TABLE tag can also contain a CAPTION tag, which specifies the caption for the table.

You can specify the width of the border surrounding the table and the default background color of the table. (Individual rows and cells in the table can have their own background color.) You can use the CELLSPACING attribute to specify the distance between cells in the table and the CELLPADDING attribute to specify the distance between the border and content of every cell. If you specify the width and height of the table, the browser will do its best to make the table fit the specified dimensions, but in some cases this may not be possible. For example, if the table contains cells that contain non-wrapping long lines, the table may not fit in a specified width.

Syntax

<TABLE
  ALIGN="LEFT|RIGHT"
  BGCOLOR="
color"
  BORDER="
value"
  CELLPADDING="
value"
  CELLSPACING="
value"
  HEIGHT="
height"
  WIDTH="
width"
  COLS="
numOfCols"
  HSPACE="
horizMargin"
  VSPACE="
vertMargin"
>
...
</TABLE>

ALIGN

specifies the horizontal placement of the table.

BGCOLOR="color"

sets the color of the background for the table. This color can be overridden by a BGCOLOR tag in the TH, TR, or TD tags. See Color Units for information about color values. Navigator 3.0

BORDER="value"

indicates the thickness, in pixels, of the border to draw around the table. Give the value as an integer. A value of 0 means the table has no border. You can also supply the BORDER attribute without specifying a value for it to indicate that the table has a border of the default thickness.

CELLPADDING="value"

determines the amount of space, in pixels, between the border of a cell and the contents of the cell. The default is 1.

CELLSPACING="value"

determines the amount of space, in pixels, between individual cells in a table. The default is 2.

HEIGHT="height"

specifies the height of the table. The default is the optimal height determined by the contents of each cell. The height value can be a number of pixels, given as an integer, or a percentage of the height of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width.

WIDTH="width"

defines the width of the table. The default is the optimal width determined by the contents of each cell. The width value can be a number of pixels, given as an integer, or a percentage of the width of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width.

COLS="numOfCols"

indicates how many virtual columns of equal width fit in the width of the window. Each actual column in the table occupies a virtual column. You would typically set the COLS attribute to be equal to the number of columns in the table to indicate that all the columns in the table have the same width. Navigator 3.0

If the WIDTH attribute is supplied, the COLS attribute indicates how many virtual columns fit in the specified width. If the WIDTH attribute is not supplied, the COLS attribute indicates how many virtual columns fit in the current window or frame. Each column in the table occupies one of the virtual columns.

Suppose that the WIDTH attribute is "80%" and the COLS attribute is 4. In this case, each virtual column takes up 20% of the width of the window. Each actual column in the table occupies a virtual column, so it occupies 20% of the width of the window, so long as the table has from 1 to 4 columns inclusive.

Note, however, that if the minimum width needed to display the contents of an actual column is graeter than the width of a virtual column, then the width of the column is expanded to fit its contents.

If the table has more actual columns than the COLS value, then the columns in excess of the COLS value are displayed in the minimum width required to fit their contents, and the other columns divide the remaining space equally between them.

For example, suppose the table has 4 columns, the WIDTH attribute is "80%", and the COLS value is 3. What happens here is that the table takes up 80% of the width of the window. The fourth column uses the minimum width necessary to display the contents of the column. The other 3 columns divide the remaining width of the table equally between them.

HSPACE="horizMargin"

specifies the distance between the left and right edges of the table and any surrounding content.

VSPACE="vertMargin"

specifies the distance between the top and bottom edges of the table and any surrounding content.

Example 1. A Simple Table.

The following example creates a three-column, four-row table, with a yellow background. The caption "Tables are as easy as one, two, three" is displayed at the bottom of the table.

<TABLE BORDER CELLPADDING="8" CELLSPACING="4" BGCOLOR=yellow>
  <TR><TH> English </TH><TH> Spanish </TH><TH> German </TH></TR>
  <TR><TD> one </TD><TD> uno </TD><TD> ein </TD></TR>
  <TR><TD> two </TD><TD> dos </TD><TD> zwei </TD></TR>
  <TR><TD> three </TD><TD> tres </TD><TD> drei </TD></TR>
<CAPTION ALIGN="BOTTOM"> <B>Table 1</B>: Tables are as easy as one, two, three
</CAPTION>
</TABLE>
The file tables.htm shows this example in action in a separate window.

Example 2: A More Complex Table.

The following example creates a four-column table. Each row has a different background color. The last row contains only two cells, which both span two rows, and the second cell spans three columns.

<TABLE CELLPADDING=3 CELLSPACING=6 BORDER=2>
 <CAPTION ALIGN=TOP>
   <BIG><BIG>Furniture Mart's Top Selling Furniture
   </BIG></BIG>
</CAPTION>
<!-- heading row -->
<TR BGCOLOR=#CCCCFF>
  <TH>NAME</TH>
  <TH>SKU</TH>
  <TH>PRICE</TH>
  <TH>DESCRIPTION</TH>
</TR>
<!-- end of heading row -->
<!-- furniture rows -->
<TR BGCOLOR=#DDEEAA>
  <TH>Harriet Smythe Armchair</TH>
  <TD>100584</TD><TD>$2150</TD><TD>description goes here</TD>
<TR>
<TR BGCOLOR=#CCFFCC>
  <TH>St. Michael Sofa</TH>
  <TD>100789</TD><TD>$5000</TD><TD>description goes here</TD>
<TR>
<TR BGCOLOR=#BBDDFF>
  <TH>Variety of prints</TH>
  <TD>-</TD><TD>$100 to $5000</TD><TD>description goes here</TD>
<TR>
<!-- more furniture rows go here -->
<!-- last row has cells that span rows and columns -->
<TR BGCOLOR=CYAN>
  <TH ALIGN=CENTER VALIGN=MIDDLE ROWSPAN=2>
    <FONT SIZE=+3>JULY SALE!!</FONT></TH>
  <TD ROWSPAN=2 COLSPAN=3 ALIGN=CENTER>
    <FONT SIZE=+1>
       Don't miss our annual July sale.
       All these prices will be slashed by 50%!!!
       But on Aug 1, they go back up, so don't be late!!
    </FONT>
  </TD>
<TR>
</TABLE>
The file tables.htm shows this example in action in a separate window.


CAPTION

(table caption)

The CAPTION tag defines a caption for a table. Place the CAPTION tag within the TABLE tag but not inside the TD or the TR tags, which indicate table cells and table rows respectively. Navigator 1.1.

Syntax

<CAPTION ALIGN="BOTTOM"|"TOP">...</CAPTION>

ALIGN

specifies the placement of the caption within a table.

Used Within

TABLE

Example

See Example 1. A Simple Table.


TR

(table row)

The TR tag specifies a table row. Use the TR tag inside a TABLE tag. The TR tag can contain TH tags, which indicate table headings, and TD tags, which indicate table cells.

Syntax

<TR
  ALIGN="CENTER|LEFT|RIGHT"
  VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
  BGCOLOR="
color"
>
...
</TR>

ALIGN

specifies the horizontal placement of the table:

VALIGN

specifies the vertical placement of the content in the cell:

BGCOLOR="color"

sets the default color of the background of the table row. See Color Units for information about color values. Navigator 3.0.

Table cells defined with the TD tag inside the row can set their own background color.

Used within

TABLE

Example

See Example 1. A Simple Table.


TD

(table data)

The TD tag specifies text in a cell in a table. Use the TD tag inside a TR tag inside a TABLE tag. Navigator 1.1.

You can set the background color of a cell by specifying its BGCOLOR attribute. For each cell, you can use the COLSPAN and ROWSPAN attributes to specify how many columns and rows the cell spans.

To specify the distance between cells, set the CELLSPACING attribute in the TABLE tag. To specify the distance between the borders of each cell and its contents, set the CELLPADDING attribute in the TABLE tag. All cells in a table have the same padding and spacing.

If a cell is empty, that is, the <TD> tag is immediately followed by the </TD> tag, the space occupied by the cell in the table is completely empty. That is, the cell has no content, no background color, and no border.

However, suppose you have a four column table, but you have no data for the second column in one of the rows. You should still provide the second TD tag for that row, because if you leave it out the table will close the gap and move the third cell into the second column. The row will end up having three columns only, and it will not be aligned with the rest of the table.

If you want an empty cell to look like other cells in the table, you can give it a period or a dash to indicate that the data is unknown, for example, <TD>-</TD>.

Syntax

<TD
  ALIGN="CENTER|LEFT|RIGHT"
  VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
  BGCOLOR="
color"
  COLSPAN="
value"
  ROWSPAN="
value"
  HEIGHT="
pixelHeight"
  WIDTH="
pixelWidth"
  NOWRAP="
value"
>
...
</TD>

ALIGN

specifies the horizontal placement of the contents of the table cell:

VALIGN

specifies the vertical placement of the contents of the cell:

BGCOLOR="color"

sets the color of the background of the table cell. See Color Units for information about color values. Navigator 1.1

COLSPAN="value"

indicates the number of columns the cell spans. Give the number as an integer.

ROWSPAN="value"

indicates the number of rows the cell spans. Give the value as an integer.

HEIGHT="pixelHeight"

specifies the suggested height of the table cell, in pixels.

WIDTH="pixelWidth"

specifies the suggested width of the table cell, in pixels.

NOWRAP

specifies that the lines within a cell cannot be broken (that is, they do not wrap onto the next line).

Used Within

TABLE and TR

Example

See the Example 1. A Simple Table.


TH

(table heading)

The TH tag specifies a table cell whose contents are usually displayed in a bolder font than those of regular table cells. The intent of the TH tag is that you use it for column or row headings. Navigator 1.1

Syntax

<TH
  ALIGN="CENTER|LEFT|RIGHT"
  VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
  BGCOLOR="
color"
  COLSPAN="
value"
  ROWSPAN="
value"
  HEIGHT="
pixelHeight"
  WIDTH="
pixelWidth"
  NOWRAP
>
...
</TH>

ALIGN

specifies the horizontal placement of the heading in the table cell:

VALIGN

specifies the vertical placement of the contents of the cell:

BGCOLOR="color"

sets the color of the background of the table heading. See Color Units for information about color values. Navigator 3.0

This color can be overridden by a BGCOLOR tag in the TD tags within the TH tag.

COLSPAN="value"

indicates the number of columns the cell spans.

ROWSPAN="value"

indicates the number of rows the cell spans.

HEIGHT="pixelHeight"

specifies the suggested height of the table cell, in pixels.

WIDTH="pixelWidth"

specifies the suggested width of the table cell, in pixels.

NOWRAP

specifies that the lines within a cell cannot be broken; that is, they do not wrap onto the next line.

Used Within

TABLE

Example

See Example 1. A Simple Table.


[Contents] [Previous] [Next] [Alphabetical Tag List] [Index]

Last Updated: 01/26/98 21:33:44


Copyright 1998 Netscape Communications Corporation