Bruce's Web Lab

Understanding Tables

The basic <TABLE> element is now accepted by most web browsers, and some browsers have added more features. Tables are not standard with browsers that still conform to HTML 2.0, but most of the Table structures below have been included in HTML 3.2.

The contents of a table may only go in the cells (<TD>...</TD> or <TH>...</TH>) or in a caption (<CAPTION>...</CAPTION>). Cell contents may be text, with almost all HTML text and block formatting tags accepted, or graphic images. A table cell may even hold another table.

Table Elements

Here are the tags:

Element	Tags	Notes on Use
Table:	<TABLE>...</TABLE>	- Surrounds entire table
Row:	<TR>...</TR>	- Surrounds all cells in a row
Cell:	<TD>...</TD>	- Surrounds contents of cell
Header Cell:	<TH>...</TH>	- Surrounds contents of header cell; - Usually used in top row for column headings
Caption:	<CAPTION>...</CAPTION>	- Surrounds a caption for the table; - Use within <TABLE>...</TABLE> tags but NOT within <TR>...</TR> or <TD>...</TD> tags; - One per table.

A simple table:

<TABLE>

<TR><TD>...</TD><TD>...</TD><TD>...</TD></TR>

</TABLE>

The above table has two rows and each row has three columns; it appears like this:

... ... ...

... ... ...

Another table:

<TABLE>

<TR><TH>COL A</TH><TH>COL B</TH><TH>COL C</TH></TR>

<TR><TD>Cell 1A</TD><TD>Cell 1B</TD><TD>Cell 1C</TD></TR>

<TR><TD>Cell 2A</TD><TD>Cell 2B</TD><TD>Cell 2C</TD></TR>

</TABLE>

The above table has a header row, two normal rows, and three columns; it appears like this:

COL A COL B COL C

Cell 1A Cell 1B Cell 1C

Cell 2A Cell 2B Cell 2C

COL A	COL B	COL C
Cell 1A	Cell 1B	Cell 1C
Cell 2A	Cell 2B	Cell 2C

And yet another table:

<TABLE>

<CAPTION>Afghanistan</CAPTION>

<TR><TH>Population</TH><TH>Area (Sq. Mi.)</TH><TH>Capital</TH></TR>

<TR><TD>22,000,000</TD><TD>250,000</TD><TD>Kabul</TD></TR>

</TABLE>

The above table has a caption, a header row, one normal row, and three columns; it appears like this:

Population Area (Sq. Mi.) Capital

22,000,000 250,000 Kabul

Afghanistan

Afghanistan
Population	Area (Sq. Mi.)	Capital
22,000,000	250,000	Kabul

Attributes for Table Elements

Common Attributes
The table elements listed above take the following parameters (attributes) in most table-aware browsers:
Element Attribute Notes on Use

<TABLE> BORDER="[#]" - Draws border of thickness [#] around table and between cells

CELLSPACING="[#]" - Sets spacing of thickness [#] between cells

CELLPADDING="[#]" - Adds spacing of thickness [#] between cell contents and top, bottom, and sides of cells

<TR> ALIGN="[RIGHT|CENTER|LEFT]" - Aligns contents of all cells in a row horizontally

VALIGN="[TOP|MIDDLE|BOTTOM]" - Aligns contents of all cells in a row vertically

<TD> ALIGN="[RIGHT|CENTER|LEFT]" - Aligns contents of a cell horizontally
(supersedes alignments set for the whole row)

VALIGN="[TOP|MIDDLE|BOTTOM]" - Aligns contents of a cell vertically
(supersedes alignments set for the whole row)

COLSPAN="[#]" - Spreads a cell across [#] columns
(pushes rest of row to right)

ROWSPAN="[#]" - Spreads a cell across [#] rows
(pushes lower rows to right)

<CAPTION> ALIGN="[TOP|BOTTOM]" - Sets location for caption above or below the table;
- Default is above the table.

**Common Attributes**
The table elements listed above take the following parameters (attributes) in most table-aware browsers:
Element	Attribute	Notes on Use
<TABLE>	BORDER="[#]"	- Draws border of thickness [#] around table and between cells
	CELLSPACING="[#]"	- Sets spacing of thickness [#] between cells
	CELLPADDING="[#]"	- Adds spacing of thickness [#] between cell contents and top, bottom, and sides of cells
<TR>	ALIGN="[RIGHT\|CENTER\|LEFT]"	- Aligns contents of all cells in a row horizontally
	VALIGN="[TOP\|MIDDLE\|BOTTOM]"	- Aligns contents of all cells in a row vertically
<TD>	ALIGN="[RIGHT\|CENTER\|LEFT]"	- Aligns contents of a cell horizontally (supersedes alignments set for the whole row)
	VALIGN="[TOP\|MIDDLE\|BOTTOM]"	- Aligns contents of a cell vertically (supersedes alignments set for the whole row)
	COLSPAN="[#]"	- Spreads a cell across [#] columns (pushes rest of row to right)
	ROWSPAN="[#]"	- Spreads a cell across [#] rows (pushes lower rows to right)
<CAPTION>	ALIGN="[TOP\|BOTTOM]"	- Sets location for caption above or below the table; - Default is above the table.

**Non-Standard Table Attributes**
More table tags and attributes are being introduced regularly by browser developers. The following attributes have not been universally adopted by web browsers; the most recent versions of the popular commercial browsers accept them.
Element	Attribute	Notes on Use
<TABLE>	BGCOLOR="[color]"	- Sets background color of table to [color] (in hexadecimal notation, e.g BGCOLOR="#FFCC00")
	WIDTH="[#]"	- Sets overall width of table to [#] pixels
<TR>	BGCOLOR="[color]"	- Sets background color of row to [color] (in hexadecimal notation, e.g BGCOLOR="#FFCC00")
<TD>	BGCOLOR="[color]"	- Sets background color of cell to [color] (in hexadecimal notation, e.g BGCOLOR="#FFCC00")
	WIDTH="[#]"	- Sets width of a cell to [#] pixels (usually affects the whole column)
	NOWRAP	- Prevents text from word-wrapping within the cell

A final table:

<TABLE BORDER="2" CELLPADDING="8" CELLSPACING="2" BGCOLOR="#FF00CC" >

<CAPTION>Afghanistan</CAPTION>

<TR><TH>Population</TH><TH>Area (Sq. Mi.)</TH><TH>Capital</TH></TR>

<TR ALIGN="CENTER"><TD>22,000,000</TD><TD>250,000</TD><TD>Kabul</TD></TR>

</TABLE>

The above table has a caption, a header row, one normal row, and three columns. It has a border 2 pixels thick, padding around the cell contents of 8 pixels, and spacing between cells of 2 pixels; the contents of the cells are centered horizontally. The background color of the entire table has been set to magenta. It appears like this:

Population Area (Sq. Mi.) Capital

22,000,000 250,000 Kabul

Afghanistan

[Go to Top] [Return to Web Lab Home Page]