HTML Tables

HTML Tables are arranged up and down by rows and left and right by columns which are filled by data cells. A cell may be specify to occupy one or more HTML table rows or columns.

Tags and Attributes

<TABLE> - Designates the start of a table.

ALIGN="left" - Depreciated Sets the table alignment. Possible values are left, center, or right.
BORDER="5" - Sets the width of the table border in pixels. The default is 0.
CELLSPACING="2" - Sets the amount of space in pixels between the cells that are in the table.
CELLPADDING="3" - Sets the space in pixels between the edges of each cell and the contents of the cell.
DATAPAGESIZE="20" - Can be used to set the size of a table page when the length of the table may exceed content that can fit on one page.
WIDTH="50%" - Sets the width of the table on the page in pixels or a percent of the page from 1% to 100%.
RULES="ROWS" - Turns on lines around elements of tables. Possible values are NONE, ROWS, COLS, GROUPS (borders between rows), or ALL. The default is NONE.
BGCOLOR="#0000FF" - Depreciated Sets the background color of all cells unless otherwise specified in a table row or table data cell definition.
BACKGROUND="flowers.gif" - Sets a background image like a wallpaper to be used in the table. This works on some web browsers.
SUMMARY="To compare values" - The reason for the table.
FRAME - Determines which ot the table outer borders are visible. Possible values are above, below, border, box, hsides (left and right), lhs (left only), rhs, vsides (top and bottom), or void.

<CAPTION> - Must be first in the table before other elements. Must have the </CAPTION> closing tag.
<COLGROUP> - Sets the table up in column groups essentially dividing one or more columns into several groups. Use after CAPTION and before THEAD. Does not have a closing tag. Attributes:

ALIGN - Possible values are center, left, right, char (Aligns the cell contents on the character specified by the CHAR attribute), and justify.
CHAR - Alignment character for cells. The character the cell is to be aligned to.
CHAROFF - Offset alignment character. Default is a period.
SPAN - Defines how many columns are in the group.
VALIGN - Values are baseline, bottom, middle, and top.
WIDTH - The column width in pixels or a percent of the table width.

<THEAD>

ALIGN - Possible values are center, left, right, char (Aligns the cell contents on the character specified by the CHAR attribute), and justify.
CHAR - Alignment character for cells. The character the cell is to be aligned to.
CHAROFF - Offset alignment character. Default is a period.
VALIGN - Values are baseline, bottom, middle, and top.

<TBODY>

ALIGN - Possible values are center, left, right, char (Aligns the cell contents on the character specified by the CHAR attribute), and justify.
CHAR - Alignment character for cells. The character the cell is to be aligned to.
CHAROFF - Offset alignment character. Default is a period.
VALIGN - Values are baseline, bottom, middle, and top.

<TFOOT>

ALIGN - Possible values are center, left, right, char (Aligns the cell contents on the character specified by the CHAR attribute), and justify.
CHAR - Alignment character for cells. The character the cell is to be aligned to.
CHAROFF - Offset alignment character. Default is a period.
VALIGN - Values are baseline, bottom, middle, and top.

<TH> - Designates the start of a table header. Table headers use the same attributes as data cells.

ABBR="SHORT" - Text is entered for this attribute that contains a short version of the cell content for when space is limited.
AXIS - A categorization of a table cell. This is a list of categories separated by commas.
ALIGN="RIGHT" - Sets horizontal alignment of the contents of the cell as LEFT, RIGHT, or CENTER. The default is LEFT.
VALIGN="TOP" - Sets the vertical alignment of the contents of the cells in the row as TOP, MIDDLE, or BOTTOM. The default is MIDDLE.
CHAR - Alignment character for cells. The character the cell is to be aligned to.
CHAROFF - Offset alignment character. Default is a period.
ROWSPAN="3" - Sets the number of rows this cell will occupy.
COLSPAN="2" - Sets the number of columns this cell will occupy.
HEADERS - A list of header cells separated by spaces that define the headers that apply to the TH element.
SCOPE - Values are column, row, colgroup, and rowgroup.
NOWRAP="NOWRAP" - Depreciated Sets the data cell so the contents will not wrap to another line.
HEIGHT Depreciated - Cell height in pixels.
WIDTH="10%" - Depreciated Sets the width of this column of cells expressed as a percentage of the table width or as a number of pixels.
BGCOLOR="white" - Depreciated Sets the background color of this cell.

</TH> - Designates the end of a table header.
<TR> - Designates the start of a table row.

ALIGN="CENTER" - Sets horizontal alignment of the contents of the cells in the row as LEFT, RIGHT, or CENTER. The default is LEFT.
CHAR - Alignment character for cells. The character the cell is to be aligned to.
CHAROFF - Offset alignment character. Default is a period.
VALIGN="TOP" - Sets the vertical alignment of the contents of the cells in the row as TOP, MIDDLE, or BOTTOM. The default is MIDDLE.
BGCOLOR="blue" - Depreciated Sets the background color of cells that are contained in the row.
BACKGROUND="ice.gif"- Sets a background image like a wallpaper to be used in the row. This works on some web browsers.

</TR> - Designates the end of a table row.
<TD> - Designates the start of a table data cell.

ABBR="SHORT" - Text is entered for this attribute that contains a short version of the cell content for when space is limited.
AXIS - A categorization of a table cell. This is a list of categories separated by commas.
ALIGN="RIGHT" - Sets horizontal alignment of the contents of the cell as LEFT, RIGHT, or CENTER. The default is LEFT.
VALIGN="TOP" - Sets the vertical alignment of the contents of the cells in the row as TOP, MIDDLE, or BOTTOM. The default is MIDDLE.
CHAR - Alignment character for cells. The character the cell is to be aligned to.
CHAROFF - Offset alignment character. Default is a period.
ROWSPAN="3" - Sets the number of rows this cell will occupy.
COLSPAN="2" - Sets the number of columns this cell will occupy.
HEADERS - A list of header cells separated by spaces that define the headers that apply to the TH element.
SCOPE - Values are column, row, colgroup, and rowgroup.
NOWRAP="NOWRAP" - Depreciated Sets the data cell so the contents will not wrap to another line.
HEIGHT Depreciated - Cell height in pixels.
WIDTH="10%" - Depreciated Sets the width of this column of cells expressed as a percentage of the table width or as a number of pixels.
BGCOLOR="white" - Depreciated Sets the background color of this cell.
BACKGROUND="ice.gif" - Sets a background image like a wallpaper to be used in the cell. This works on some web browsers.

</TD> - Designates the end of a table data cell.
</TABLE> - Designates the end of a table.

An example HTML table

This is the HTML code using depreciated attributes:

This is the HTML code using style attributes:

This is how it looks:

ROW 1, COL 1	ROW 1, COL 2	ROW 1, COL 3
ROW 2, COL 1-3
ROW 3, COL 1-2		ROW 3, COL 3
ROW 4-6, COL 1	ROW 4, COL 2	ROW 4, COL 3
	ROW 5, COL 2	ROW 5, COL 3
	ROW 6, COL 2	ROW 6, COL 3

This table sets the row colors independently for effect rather than setting the background color for the entire table.

Another example HTML table

This is the HTML code:

<tr><th colspan="3"> This is a list of example Linux commands</th></tr>
<table rules="rows">
<tr><td nowrap="nowrap">find /home -user mark</td><td width="20"></td><td>Will find every file under the directory /home owned by the user mark.</td></tr>
<tr><td nowrap="nowrap">find /usr -name *spec</td><td width="20"><td><td>Will find every file under the directory /usr ending in ".spec".</td></tr>
<tr><td nowrap="nowrap">find /var/spool -mtime +40</td><td width="20"></td><td>Will find every file under the directory /var/spool that has data older than 40 days.<td><tr>
</table>

The HTML attributes, NOWRAP, and WIDTH are depreciated but I can't get the style attributes of WHITESPACE and BORDER-WIDTH to work here as replacements.

This is how it looks:

This is a list of example Linux commands
find /home -user mark		Will find every file under the directory /home owned by the user mark.
find /usr -name *spec		Will find every file under the directory /usr ending in ".spec".
find /var/spool -mtime +40		Will find every file under the directory /var/spool that has data older than 40 days.

This table uses the nowrap="nowrap" attribute to keep the first cell in each row from wrapping. It also used a width attribute with value of 20 and no text in the cell to allocate some blank space between column 1 and column 3.

TBODY Tag

Technically the TBODY tag is to be used one or more times inside each occurance of the TABLE element. However, in many cases it may not be used. The THEAD and TFOOT tags may be optionally used one time inside a TABLE element.