Table Elements

TABLE

All table elements must go inside the TABLE element, i.e. <TABLE></TABLE>. If you forget to put the final </TABLE>, you probably won't even see your table. Here are the attributes of the TABLE element (all attributes of TABLE are optional):

BORDER="n": 'n' equals, in pixels, how thick the border will be. A borderless table can be made with border=0 or by leaving out this attribute.
WIDTH="n" or "n%": You can set how wide the table will be, either in pixels, or in a percentage of the user's browser window.; It is highly recommended that if you use this attribute, you use a percent, since you can have no way of knowing how many pixels wide a reader's screen is.
CELLPADDING="n": 'n' equals, in pixels, how far the data in each cell will be from the cell's borders.
CELLSPACING="n": 'n' equals, in pixels, how far each cell will be from the other cells.
ALIGN="LEFT", "RIGHT" or "CENTER": This aligns the table, much like ALIGN="LEFT" or ALIGN="RIGHT" in an IMG element.; Note that ALIGN="CENTER" does not work on most versions of Netscape; in that case, nest the TABLE in a DIV element which has the attribute ALIGN="CENTER".

CAPTION

If you'd like your table to have a caption right up next to it, you'd place it in this element. CAPTION takes one optional attribute:

ALIGN="TOP" or "BOTTOM": "TOP" puts the caption on top of the table; "BOTTOM" puts it on the bottom.; If you don't define ALIGN, the caption will be on the top (i.e. "TOP" is the default).

TR

This stands for table row. Each row is defined between these tags. TR has two optional attributes:

ALIGN="LEFT", "RIGHT" or "CENTER": This will align an entire row horizontally to either the left, right or center.
VALIGN="TOP", "BOTTOM" or "MIDDLE": This will align the contents of each cell in the row vertically, either to the top of the cell, the bottom, or the middle.

TH and TD

TH is for table headings, TD is for regular cells, or table data. The contents of a table heading, by default, are centered and bold. The contents of a regular cell, by default, are aligned left and displayed using normal text. Both headings and regular cells, by default, are vertically aligned in the middle of the cell. TD and TH share these optional attributes:

ALIGN="LEFT", "RIGHT" or "CENTER": It's our old friend ALIGN. This allows you to position text horizontally in a cell.
VALIGN="TOP", "BOTTOM" or "MIDDLE": This allows you to position text vertically in a cell.
ROWSPAN="n": This allows you to stretch a cell down 'n' number of rows.
COLSPAN="n": This allows you to stretch a cell over 'n' number of columns.
NOWRAP: This attribute indicates that the contents of the cell should not be wrapped. You would need to use <BR> to wrap long lines of text.
WIDTH="n"
HEIGHT="n": You can suggest the width and/or height of a cell in pixels using these attributes. However, this can cause horizontal scrolling if the cells are wider than the reader's browser. Horizontal scrolling is the bane of all HTML authors -- beware!

Although it's not required, it is a good idea to explicitly close every element in a TABLE. In other words, always use </TR>, </TD> and </TH> (</CAPTION> is required).

You can put any Block Element in a table cell, including other tables. Nesting tables can get tricky, but don't be afraid to play around a bit.

Previous: Table Contents
Next: Example Table