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>