Tables
Return to Main Page of Ted’s HTML Tutorial
One of the most useful tools for presenting information is a table. Unlike with most word-processing programs, however, there is no preset table structure or framework available in HTML into which information can be placed. For this reason, it is recommended that a skeleton of the final table one wishes to have first be drawn on paper to visualize it more easily before converting it into HTML commands.
When creating a table, one should realize two things: 1) that numerous HTML tags must be used and 2) that the “vertically oriented” set of table tags in the HTML source code document looks virtually nothing like the final “horizontally oriented” table which is marked up on a browser. (Table Examples will be given after all the attributes of tables have been described.) HTML tables are created using “table” tags in the source code document:
- <TABLE>row(s) of data cells</TABLE>: creates a table with a row or rows of one or more cells, each cell containing data (text, graphic images, or both). Tables may be nested (one table inside of another table inside of another table). On most browsers, no line space is inserted before or after a table. On some browsers, however, a line space automatically is inserted before and after a table (that is, an entire line is skipped between a table and any text before and after it).
Note: On most browsers, when a table is placed between style tags (such as <FONT> & </FONT>, <B> & </B>, and <I> & </I>), these tags have no effect on the text within the table. Rather, these tags need to be placed around the strings of text within individual cells of the table to have the desired effects.
Table “rows” and “data cells” will be explained later. First, though, other table-related parameters and tags will be defined. A <TABLE> tag may contain within it other parameters as part of the command:
- BORDER="B": creates a border (rim), of width “B” in pixels, around the edge of a table. The parameter BORDER by itself (without a value of “B”) will produce a uniform border (of 2 pixels width) around the table (and around individual cells within the table). Excluding the BORDER parameter from the <TABLE> tag will cause the borders around and within the table to be invisible. BORDER="0" causes there to be no borders whatsoever, either visible or invisible.
- BORDERCOLOR="COLOR"|"#COLOR CODE": colors the borders around and within a table. For more on color coding, go to Color Coding.
Note: If no border color is listed, the border will be gray and will appear beveled around the table.
BGCOLOR="COLOR"|"#COLOR CODE": colors the background of an entire table. This command is overridden by any BGCOLOR command found within a table heading cell tag (<TH>), table row tag (<TR>), or data cell tag (<TD>), each described later. For more on color coding, go to Color Coding.
ALIGN="LEFT"|"RIGHT": positions a table at a specific location on the page.
"LEFT" (the default) aligns a table with the left margin of the page, and text is wrapped around the right side of the table.
"RIGHT" aligns a table with the right margin of the page, and text is wrapped around the left side of the table.
Note: Some browsers do not recognize the ALIGN parameter for tables. An ALIGN="CENTER" parameter will center a table horizontally on the page (for most browsers), but it will not allow text to be placed on both sides of the table. To center a table, it is safer to place it between <CENTER> & </CENTER> tags, or else between <P ALIGN="CENTER"> & </P> tags.
WIDTH="W": defines the horizontal width “W” of an entire table on the page. “W” can be expressed as a percentage “W%” (of the total width of the page) or simply as a whole number without the percent (indicating the number of pixels wide).
HEIGHT="H": defines the vertical height H” of a table. “H” can be expressed as a percentage “H%” (of the total height of the browser window) or simply as a whole number without the percent (indicating the number of pixels high). In most cases, specifying the height of a table is unnecessary. (One example where it can be useful is in a frames document.)
CELLSPACING="S": causes the non-colored portion of the border (whether visible or invisible) around a table and between adjacent cells of the table to be “S” pixels in width.
The default cellspacing width is 2 pixels.
Note: Even with CELLSPACING="0", a border will be 2 pixels wide. This automatic 2-pixel width also is present when the border is invisible, unless the parameter BORDER="0" has been added.
CELLPADDING="P": creates a minimum distance of “P” pixels between the contents (text or graphic image) of each table cell and the closest (visible or invisible) border of the cell. The default cellpadding is 1 pixel.
Note: These parameters will create the most compact table possible: <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">.
Following a <TABLE> tag, an optional set of “caption” tags may be inserted:
- <CAPTION>text</CAPTION>: places a horizontally centered title at the top or at the bottom of a table. If a caption is wider than the table, the caption will break and continue onto the next line(s) so as to remain within the left and right boundaries of the table. (If nobreak tags are placed around a caption which is wider than the table it titles, an unsightly blank column will be added to the right side of the table, extending the table’s right edge to the end of the caption.) A caption’s location can be adjusted as described below.
A <CAPTION> tag may contain within it an alignment parameter as part of the command:
- ALIGN="TOP"|"BOTTOM": positions an optional caption (title) at a specific location in relation to a table.
"TOP" (the default) places the caption above the body of a table.
"BOTTOM" places the caption below the body of a table.
Note: There is no aligning parameter to center a caption horizontally, as a caption automatically is centered horizontally by default.
Another optional set of tags, table heading” tags, also may follow a <TABLE> tag (after the optional caption):
- <TH>text</TH>: places an optional heading above any column of a table. The text of the heading is bold, and it is centered (horizontally and vertically) unless otherwise specified.
A <TH> tag may contain within it other parameters as part of the command:
- BGCOLOR="COLOR"|"#COLOR CODE": colors the background of a heading cell. This command overrides any BGCOLOR command found within the table tag (<TABLE>). For more on color coding, go to Color Coding.
- ALIGN="LEFT"|"CENTER"|"RIGHT": positions the text in a heading cell at a specific location horizontally within the cell.
"LEFT": aligns the text in a heading cell with the left margin of the cell.
"CENTER" (the default): centers the text in a heading cell horizontally within the cell.
"RIGHT": aligns the text in a heading cell with the right margin of the cell.
- VALIGN="TOP"|"MIDDLE" (or "CENTER")|"BOTTOM"|"BASELINE": positions the text in a heading cell at a specific location vertically within the cell.
"TOP": aligns the text in a heading cell with the top margin of the cell.
"MIDDLE" (or "CENTER") (the default): centers the text in a heading cell vertically within the cell.
"BOTTOM": aligns the text in a heading cell with the bottom margin of the cell.
"BASELINE": aligns the baseline of the data in each heading cell of that row with the baseline of the data in every other heading cell in the row.
- WIDTH="W": defines the width “W” of a heading cell. “W” can be expressed as a percentage “W%” (of the total width of the table) or simply as a whole number without the percent (indicating the number of pixels wide). Whether expressed as a percentage or as a whole number, the combined widths of all heading cells should add up to the total width of the table.
Note: If all the data cells in a column are the same width as that column’s heading cell, which typically they are, the width parameter needs to be included only in the heading cell.
HEIGHT="H": defines the height “H” of a heading cell in pixels. If the height of one heading cell in a row is specified, all heading cells in that row will become that same height. If different heights are specified for heading cells in a row, all heading cells in that row will become the largest height.
Note: The height of a heading cell is not expressed as a percentage (“H%”), because it would be a percentage of the height of the browser window rather than of the table.
COLSPAN="C": specifies how many columns “C” of a table a heading cell will span. COLSPAN="1" is the default.
ROWSPAN="R": specifies how many rows “R” of a table a heading cell will span. ROWSPAN="1" is the default. A row span made to extend into rows which have not been created with <TR> & </TR> tags will be truncated. This parameter rarely will be used for headers, since the text of headers most likely will be on the same row.
NOWRAP: causes the string of text in a heading cell not to be broken to fit the allocated width of the cell. Use of this parameter may force the width of that heading cell (and of the entire column) to be wider than is assigned by the WIDTH parameter, and excessively wide cells may result.
As stated before, a table is composed of rows of cells. To create a row, a pair of “table row” tags is used:
- <TR>table data cells</TR>: defines each horizontal row of table data cells inside of a table.
A <TR> tag may contain within it other parameters as part of the command:
- BGCOLOR="COLOR"|"#COLOR CODE": colors the background of an entire row. This command overrides any BGCOLOR command found within the table tag (<TABLE>), and it is overridden by any BGCOLOR command found within a data cell tag (<TD>). For more on color coding, go to Color Coding.
- ALIGN="LEFT"|"CENTER"|"RIGHT": positions the data in each cell of a row at a specific location horizontally within the cell. This command is overridden by any ALIGN command found within an individual data cell tag (<TD>).
"LEFT" (the default): aligns the data in each cell of that row with the left margin of the cell.
"CENTER": centers the data in each cell of that row horizontally within the cell.
"RIGHT": aligns the data in each cell of that row with the right margin of the cell.
- VALIGN="TOP"|"MIDDLE" (or "CENTER")|"BOTTOM"|"BASELINE": positions the data in each cell of a row at a specific location vertically within the cell. This command is overridden by any VALIGN command found within an individual data cell tag (<TD>).
"TOP": aligns the data in each cell of that row with the top margin of the cell.
"MIDDLE" (or "CENTER") (the default): centers the data in each cell of that row vertically within the cell.
"BOTTOM": aligns the data in each cell of that row with the bottom margin of the cell.
"BASELINE": aligns the baseline of the data in each cell of that row with the baseline of the data in every other cell in the row.
To create each cell in a row, a pair of “table data” (cell) tags is used:
- <TD>text and/or graphic images</TD>: defines each table data cell within a row, into which text and/or graphic images may be placed.
A <TD> tag may contain within it other parameters as part of the command:
- BGCOLOR="COLOR"|"#COLOR CODE": colors the background of a cell. This command overrides BGCOLOR commands found within the table tag (<TABLE>) or row tag (<TR>). For more on color coding, go to Color Coding.
- ALIGN="LEFT"|"CENTER"|"RIGHT": positions the text in a data cell at a specific location horizontally within the cell. These commands override ALIGN commands found within row tags (<TR>).
"LEFT" (the default): aligns the data in a cell with the left margin of the cell.
"CENTER": centers the data in a cell horizontally within the cell.
"RIGHT": aligns the data in a cell with the right margin of the cell.
- VALIGN="TOP"|"MIDDLE" (or "CENTER")|"BOTTOM"|"BASELINE": positions the text in a data cell at a specific location vertically within the cell. These commands override VALIGN commands found within row tags (<TR>).
"TOP": aligns the data in a cell with the top margin of the cell.
"MIDDLE" (or "CENTER") (the default): centers the data in a cell vertically within the cell.
"BOTTOM": aligns the data in a cell with the bottom margin of the cell.
- WIDTH="W": defines the width “W” of a data cell. “W” can be expressed as a percentage “W%” (of the total width of the table) or simply as a whole number without the percent (indicating the number of pixels wide). Whether expressed as a percentage or as a whole number, the combined widths of the data cells in a row should add up to the total width of the table.
Note: If all the data cells in a column are the same width, which typically they are, the width parameter needs to be included in only one cell (usually the top cell, which often is the heading cell).
HEIGHT="H": defines the height “H” of a data cell in pixels. If the height of one data cell in a row is specified, all data cells in that row will become that same height. If different heights are specified for data cells in a row, all data cells in that row will become the largest height.
Note: The height of a data cell is not expressed as a percentage (“H%”), because it would be a percentage of the height of the browser window rather than of the table.
COLSPAN="C": specifies how many columns “C” of the table a data cell will span. COLSPAN="1" is the default.
ROWSPAN="R": specifies how many rows “R” of the table a data cell will span. ROWSPAN="1" is the default. A row span made to extend into rows which have not been created with <TR> & </TR> tags will be truncated.
Note: In a row containing one or more cells split with horizontal dividers, the ROWSPAN parameter must be placed in the <TD> tag of every cell in the row other than the cell(s) being split.
NOWRAP: causes the string of data in a data cell not to be broken to fit the allocated width of the cell. Use of this parameter may force the width of that data cell (and of the entire column) to be wider than is assigned by the WIDTH parameter, and excessively wide cells may result.
Proceed to Table Examples
Proceed to Forms
Return to Main Page of Ted’s HTML Tutorial
Copyright © 1998– by Ted M. Montgomery. All rights reserved.