<TABLE>...</TABLE>
Description
Create a table layout which can contain cells in rows and columns. The cells of
a table are specified with the TR,
TH and TD elements. You can
give a table a caption with the CAPTION element.
A general layout for a table is this :
|
<TABLE>
<CAPTION>The table caption</CAPTION>
<TR>
<TH>Table headers</TH>
</TR>
<TR>
<TD>Table data</TD>
</TR>
</TABLE>
|
If you do not supply values for width and height in the table, rows and cells
the browser will create a layout based on the contents of the table cells.
If you want to display an empty cell, because of the background, the background
color or a border, fill the cell with a non-breaking space, .
DTD
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ATTLIST TABLE -- table element --
%attrs; -- %coreattrs, %i18n, %events --
summary %Text; #IMPLIED -- purpose/structure for speech output--
width %Length; #IMPLIED -- table width --
border %Pixels; #IMPLIED -- controls frame width around table --
frame %TFrame; #IMPLIED -- which parts of frame to render --
rules %TRules; #IMPLIED -- rulings between rows and cols --
cellspacing %Length; #IMPLIED -- spacing between cells --
cellpadding %Length; #IMPLIED -- spacing within cells --
>
from the
HTML 4.0 DTD,
"Copyright ©
W3C,
(MIT,
INRIA,
Keio).
All Rights Reserved."
Attributes
Core attributes:
class
id
style
title
Internationalization attributes:
dir
lang
Events:
onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmousemove
onmouseout
onkeypress
onkeydown
onkeyup
ALIGN
Specifies the alignment of the table inside the current left and right margins.
Valid values are LEFT and RIGHT. The default is LEFT. Other content will flow
around the table when one of these values is used. Netscape Navigator 4.0 also
supports the value CENTER, which centers the complete table, but doesn't let
other content flow round.
The WebTV browser but introduces two values, bleedleft and bleedright, which
causes the table to bleed over the margin into the left side or right side of
the page.
Netscape Navigator 3.0 has a bug with the ALIGN attribute. When align="right"
is used in a nested table, sometimes no table is displayed.
BACKGROUND
Supply an image that is used as the background of the table. If the table is
larger than the image the image is tiled to fill up the used space. You can use
images in the GIF and JPEG format.
If you use an transparent image the transparent parts will be shown in the
background color of the table, or the background of the document if no
background color is supplied for the table.
BGCOLOR
Set the background color of the table.
This attribute can be used in conjunction with the GRADCOLOR attribute, which
sets the ending color for the background gradient.
See the page Using colors for a description on
specifying colors.
BORDER
Defines the width of the border surrounding the cells in the table, in pixels.
If you do not specify a value after the keyword, 1 is used. You must specify
this attribute if you use the FRAME or RULES attribute.
BORDERCOLOR
Set the color of the border of the table. This attribute only has effect if the
table has a border.
If the BORDERCOLOR attribute is used and/or the BORDERCOLORLIGHT
BORDERCOLORDARK are also used, the value of BORDERCOLOR will not be used.
See the page Using colors for a description on
specifying colors.
BORDERCOLORLIGHT
Sets the color of one of the two colors used to draw a 3-D border, the other is
set with BORDERCOLORDARK. This attribute only has effect if the table has a
border.
If both the BORDERCOLOR and BORDERCOLORLIGHT are used, the value of the
BORDERCOLORLIGHT attribute will be used.
See the page Using colors for a description on
specifying colors.
BORDERCOLORDARK
Sets the color of one of the two colors used to draw a 3-D border, the other is
set with BORDERCOLORLIGHT. This attribute only has effect if the table has a
border.
If both the BORDERCOLOR and BORDERCOLORDARK are used, the value of the
BORDERCOLORDARK attribute will be used.
See the page Using colors for a description on
specifying colors.
CELLBORDER
Use the cellborder attribute to set the width of the border for table cells in
pixels. By default, the border for the cells is the same as for the table. Use
the border attribute to set the border width for the table.
CELLPADDING
Creates a boundary between the data of a table cell and the border of the cell,
in pixels, or as a percentage.
CELLSPACING
Creates a border around every cell, in pixels, or as a percentage. This border
belongs to the border of the table.
Netscape Navigator 3.0 will draw this area in the color/image of the containing
document, not those from the table.
COLS
With this attribute you can let the browser calculate the width that each
column will have. This width is calculated from the total width of the table,
which is either a value supplied with the WIDTH attribute or the width of the
current window:
total width
column width = -------------------
number of columns
If the contents of a column do not fit in the calculated width then the column
will grow wider, but the other columns will remain the originally calculated
width.
If you put more columns in the table than stated in the COLS value the extra
columns will be as wide as needed, and the width of all other columns will be
reduced evenly.
FRAME
This attribute determines which part of the border of the table will be
visible. To be effective you must also specify the BORDER attribute. Possible
values for the FRAME attribute are :
Value |
Description |
ABOVE |
Only display a border above the table.
|
BELOW |
Only display a border below the table.
|
BORDER/BOX |
Display all four borders. You do not need to use the FRAME attribute to get
this effect, because using only the BORDER attribute will do the same.
|
HSIDES |
Display the border on the left and right side.
|
LHS |
Only display a border on the left-hand side of the table.
|
RHS |
Only display a border on the right-hand side of the table.
|
VOID |
No borders around the table will be displayed. Borders between cells will be
displayed.
|
VSIDES |
Display a border above and below the table.
|
You can use this attribute multiple times with values that do not exclude each
other, for example to display a border above and on the right-hand side of a
table.
GRADANGLE
Defines the gradient angle of a table. Values range from 90 to -90 degrees.
gradangle="0"
creates a simple left-to-right gradient.
gradangle="90"
creates a top-to-bottom gradient.
GRADCOLOR
Defines the ending color for a background gradient in a table. Colors can be
specified either as hexadecimal color values or as predefined color names. This
attribute must be used in conjunction with the BGCOLOR attribute, which sets
the starting color for the background gradient.
See the page Using colors for a description on
specifying colors.
HEIGHT
Set the height of the table. The value can be supplied as a number of pixels or
a percentage of the current available height. Note that using a percentage with
a nested table is ignored by some browsers.
If the contents of the table cannot be displayed in the given height the table
will be enlarged to make everything fit. If you do not supply a height the
browser determines the height automatically, based on the table contents.
HREF
Use the href attribute to set the destination URL for the table. The href
attribute causes the entire table to become an anchor and defines the URL for
that anchor. When the viewer selects the table, the WebTV interface will go to
that page.
HSPACE
Set the amount of space, in pixels, that the browser should keep free on the
between the left and right sides of the table and other content.
This attribute only has an effect when the attribute align="left" or
align="right" is used also.
NOWRAP
Prevents table rows from wrapping if they extend beyond the right margin of the
Web page.
RULES
Set additional options to draw the border of table cells. To be effective you
must also specify the BORDER attribute. Possible values are:
Value |
Description |
ALL |
Display a border on all rows and columns.
|
BASIC |
Displays horizontal borders between the THEAD, TBODY, and TFOOT portions of
a table.
|
COLS |
Displays horizontal borders between all table columns.
|
GROUPS |
Displays vertical borders between the groups of columns, as they are defined
with the COL
element and the COLGROUP
element.
|
NONE |
Removes all interior table borders.
|
ROWS |
Displays horizontal borders between all table rows.
|
SUMMARY
This attribute supplies a summary of the contents of the table, that can be
used by non-visual browsers.
TRANSPARENCY
With version 1.1 of the WebTV interface, use the transparency attribute for the
background color for the table. The value for the transparency attribute can
range from 0 (fully opaque) to 100 (fully transparent). The default value for
transparency is 0. Note that the WebTV interface has implemented optimizations
for a transparency value of 50 that make pages draw faster.
VSPACE
Set the amount of space, in pixels, that the browser should keep free above and
below the table and other content.
This attribute only has an effect when the attribute align="left" or
align="right" is used also.
WIDTH
Set the width of the table. The value can be supplied as a number of pixels or
a percentage of the current available space between the left and right
margins.
If the contents of the table cannot be displayed in the given width the table
will be enlarged to make everything fit. If you do not supply a width the
browser determines the width automatically, based on the table contents.
Examples
|
A right-aligned table
<TABLE border="5" width="50%" align="right" background="BACKGROUND.gif">
<TR>
<TD><SPAN style="color: #000">The cell contents</SPAN></TD>
<TD><SPAN style="color: #000">The cell contents</SPAN></TD>
</TR>
</TABLE>
|
|
|
A right-aligned table
The cell contents |
The cell contents |
|
|
|
A table with a wider border, but only on the left- and
right-hand side.
<TABLE border="5" frame="hsides" width="50%" cellspacing="8" background="BACKGROUND.gif">
<TR>
<TD bgcolor="#AFFF79"><SPAN style="color: #000">The cell contents</SPAN></TD>
<TD><SPAN style="color: #000">The cell contents</SPAN></TD>
</TR>
</TABLE>
|
|
|
A table with a wider border, but only on the left- and
right-hand side.
The cell contents |
The cell contents |
|
|
|
A table with a boundary of 8 pixels
<TABLE border="5" width="50%" cellpadding="8" bgcolor="#ffaf79"
bordercolordark="#00a000" bordercolorlight="#00ffff" background="BACKGROUND.gif">
<TR>
<TD><SPAN style="color: #000">The cell contents</SPAN></TD>
<TD><SPAN style="color: #000">The cell contents</SPAN></TD>
</TR>
</TABLE>
|
|
|
A table with a boundary of 8 pixels
The cell contents |
The cell contents |
|