Back Main GuestBook Contact Music (JS) Appendix

<TABLE></TABLE> - HTML Tables

This tag is used to define a table. All of the table's content, including the caption, is placed within the opening and closing <TABLE> tags.

You are required to put </TABLE> as a closing tag! You have been forewarned.

HTML 4.0 Specification § 11.2.1

Attributes for <TABLE>

  %coreattrs %i18n %events

Basic Structural Attributes

  summary= [CS]
Gives description.
This attribute gives a description of the table, its purpose and its structure.

Presentational Attributes

  width= [CN]
Specifies width in pixels.
Specifies width by percentage of available space.
This attribute specifies the width of the table by either pixels or percentage.
  rules= [CI]
  • none
Specifies no lines between table cells. This is the default unless border is set to a value other than "0".
  • groups
Specifies lines between row groups (<THEAD>,<TFOOT>,<TBODY>) and between column groups (COLGROUP).
  • rows
Specifies lines between rows only.
  • cols
Specifies lines between columns only.
  • all
Specifies lines between rows and between columns. This is the default value if border is set to a value other than "0".
This attribute specifies where rules (lines) will be drawn to distinguish cells.
  frame= [CI]
  • void
Specifies no border. This is the default unless border is set to a value other than "0".
  • above
Specifies a border across the top of the table.
  • below
Specifies a border across the bottom of the table.
  • hsides
Specifies a border across the top and another across the bottom.
  • lhs
Specifies a border along the left side of the table.
  • rhs
Specifies a border along the right side of the table.
  • vsides
Specifies a border along the right and another along the left.
  • box
Specifies a border on all four sides of the table. This is the default if border is set to a value other than "0".
  • border
Same as box.
This attribute specifies whether and how a border will be drawn around the table.
This attribute is new to HTML 4 and is therefore not supported by older browsers.
  border= [CN]
Specifies width in pixels. The default value is "0".
This attribute specifies the width of the table's border. A value greater than one implies rules="all" and frame=border (unless they are overridden).
D cellspacing= [CN]
Specifies spacing in pixels.
Specifies spacing by percent. By percent of what, I don't know.
This attribute specifies the amount of space between table cells and between table cells and the table's border.
D cellpadding= [CN]
Specifies padding in pixels. The default value is "0".
Specifies padding by percent. Each side gets half. (So a padding of 20% would be split 10% top, 10% bottom, 10% left, 10% right.) I think it's a percentage of what the table would be without the padding.. but I'm not exactly sure.
This attribute specifies the amount of space between a cell's frame and its contents.
D bgcolor= [CI]
Specifies the color in hexadecimal form.
Specifies the color by name.
This attribute controls the background color of the cells in the table.
See also background color rules.
D align= [CN]
  • "left"
Specifies alignment with left margin, allowing text wrap.
  • "right"
Specifies alignment with right margin, allowing text wrap.
This attribute specifies the table's alignment. Values of "left" and "right" allow content after the table to wrap between the table and the opposite margin. See Images for more information on this 'float' behavior.

Samples:

Simple Table with frame="hsides" and rules="cols":

Cell A Cell B Cell C Cell D
Cell E Cell F Cell G Cell H

Same table with border="5" and cellspacing="20":

Cell A Cell B Cell C Cell D
Cell E Cell F Cell G Cell H

Table with border="5" and cellpadding="20":

Cell A Cell B Cell C Cell D
Cell E Cell F Cell G Cell H

Table with border="10" and width="100%":

Cell A Cell B Cell C Cell D
Cell E Cell F Cell G Cell H

Here is the code for the samples above:

<P>Simple Table with <CODE>frame="hsides"</CODE> and <CODE>rules="cols"</CODE>:</P>

<TABLE frame="hsides" rules="cols">
<TR>
    <TD>Cell A</TD>
    <TD>Cell B</TD>
    <TD>Cell C</TD>
    <TD>Cell D</TD>
</TR>
<TR>
    <TD>Cell E</TD>
    <TD>Cell F</TD>
    <TD>Cell G</TD>
    <TD>Cell H</TD>
</TR>
</TABLE>

<P>Same table with <CODE>border="5"</CODE> and <CODE>cellspacing="20"</CODE>:</P>

<TABLE border="5" cellspacing="20">
<TR>
    <TD>Cell A</TD>
    <TD>Cell B</TD>
    <TD>Cell C</TD>
    <TD>Cell D</TD>
</TR>
<TR>
    <TD>Cell E</TD>
    <TD>Cell F</TD>
    <TD>Cell G</TD>
    <TD>Cell H</TD>
</TR>
</TABLE>

<P>Table with <CODE>border="5"</CODE> and <CODE>cellpadding="20"</CODE>:</P>

<TABLE border="5" cellpadding="20">
<TR>
    <TD>Cell A</TD>
    <TD>Cell B</TD>
    <TD>Cell C</TD>
    <TD>Cell D</TD>
</TR>
<TR>
    <TD>Cell E</TD>
    <TD>Cell F</TD>
    <TD>Cell G</TD>
    <TD>Cell H</TD>
</TR>
</TABLE>

<P>Table with <CODE>border="10"</CODE> and <CODE>width="100%"</CODE>:</P>

<TABLE border="10" width="100%">
    <TR>
    <TD>Cell A</TD>
    <TD>Cell B</TD>
    <TD>Cell C</TD>
    <TD>Cell D</TD>
</TR>
<TR>
    <TD>Cell E</TD>
    <TD>Cell F</TD>
    <TD>Cell G</TD>
    <TD>Cell H</TD>
</TR>
</TABLE>

Related Topics

Some notes on browser behavior:

Microsoft Internet Explorer and Netscape Navigator have differing interpretations on width and bgcolor for the <TABLE> tag. MSIE interprets the width by percent as a percentage of the viewport, instead of the available space as it should be. Netscape displays this correctly. Also, MSIE applies bgcolor on <TABLE> to the spacing between cells, which Netscape does not.

Background Color Rules

  1. <TABLE>'s bgcolor sets the background color for all the cells in the table.
  2. <TR>'s bgcolor sets the background color for all the cells in that row, painting over any colors from the <TABLE> tag.
  3. <TD>'s and <TH>'s bgcolor set the background color for that individual cell and paints over any colors set in the <TABLE> tag as well as any colors set in the <TR> tag.
  4. If no background color affects a table cell, it remains transparent.

Table with three rows and four columns and background colors set at three levels: All the cells in the table should be red, except for the cells in the first row. The first row's bgcolor attribute overrides the table's bgcolor, and the first row's cells should be blue except for the first cell. This cell's <TD> tag has its bgcolor set to "green". Since the individual cell's colors override all others, the first cell in the first column should be green.

Cell A Cell B Cell C Cell D
Cell E Cell F Cell G Cell H
Cell I Cell J Cell K Cell L

General Inheritance Rules for Tables: Order of Precedence

[1 = highest precedence]

  1. Cell - <TD>/<TH>
  2. Row - <TR>
  3. Row Group - <TBODY>/<THEAD><TFOOT>
  4. Column Group - <COL>, then <COLGROUP>
  5. Table - <TABLE>
  6. Container - whatever element encloses the table

This order is followed for dir, lang, and stylesheet rules (according to CSS2). The order is slightly different for horizontal alignment in HTML.

|CAPTION      |TR      |TD      |TH      |TBODY      |THEAD      |TFOOT      Top

See also advanced tables

Valid HTML 4.01!