HTML Table Tags Reference Chart
In the chart below are the most commonly used HTML table elements, attributes, and values. It's not all of them, but the only ones you'll probably ever need. The members area does have much more comprehensive tutorials and reference charts if you need more than a free lunch.
The HTML table elements in the following chart are in the left-hand column, and the available attributes are in the center column. The right-hand column provides a description. Here's an example of how to use the chart to add the width attribute and value to a table tag:
<table width="400">
That would make a table four hundred pixels wide as long as the content didn't force it bigger. You can also express the attribute value as a percentage.
When used in a table tag, a percentage would cause the table to be drawn as a percentage of the horizontal space available. When used in a table data cell, then the percentage is rendered as a percentage of the table width. Example:
<td width="40%">
That would make the table data cell 40% of the width of the table. Whether using a hard measurement or a percentage, the width of the table data cells must equal the width of the table itself or the browser will render the table according to what it's programming determines is best rather than what you wanted—and you never know how that will turn out.
Before creating any complicated tables, I recommend drawing them on paper first. That will give you a clearer idea of what you're trying to accomplish as you set about creating the code. For a basic overview of tables, see the Tables Overview tutorial.
| Tag |
Tag attribute |
Function |
| <table> |
|
Begins a table. |
| |
border="..." |
Sets the border width in numerical values from 0 and up. |
| |
cellspacing="..." |
Empty space between table data cells. |
| |
cellpadding="..." |
Empty space between the edge of a cell and cell content. |
| |
align="..." |
Aligns the table to the left, right or center. |
| |
width="..." |
The width of the table; measured in pixels or as a percentage of available space. |
| |
bgcolor="..." |
Background color for all cells that do not have a background color or image specified. |
| |
background="..." |
Background image for all cells that do not have a background color or image specified. |
| |
bordercolor="..." |
Border color for the table. |
| |
bordercolorlight="..." |
Light border color. When used with bordercolordark, helps to create a 3d effect. (Internet Explorer) |
| |
bordercolordark="..." |
Dark border color. When used with bordercolorlight, helps to create a 3d effect. (Internet Explorer) |
| |
valign="..." |
Vertical alignment of the content, values are top or bottom. |
| <tr> |
|
Establishes a table row. |
| |
align="..." |
Horizontal alignment of the content of all cells within this row. Values are left, right and center. |
| |
valign="..." |
Vertical alignment of all cells within this row. Values are top, middle, bottom, and baseline. |
| |
bgcolor="..." |
Background color of all cells within this row that don't have their own background color or background image. |
| |
background="..." |
Background image of all cells within this row that don't have their own background color or background image. |
| |
bordercolor="..." |
Border color for this row (Internet Explorer). |
| |
bordercolorlight="..." |
Light border color for 3d look (Internet Explorer). |
| |
bordercolordark="..." |
Dark border color for 3d look (Internet Explorer). |
| <th> |
|
Begins the table header cell. *See note. |
| |
align="..." |
Horizontal alignment of the cell content. Values are left, right and center. |
| |
valign="..." |
Vertical alignment of the cell content. Values are top, middle, bottom, and baseline. |
| |
rowspan="..." |
The number of rows the cell will span. |
| |
colspan="..." |
The number of columns the cell will span. |
| |
nowrap |
Prevents cell content from automatically wrapping. |
| |
width="..." |
The width of this cell, expressed in pixels or percentage. |
| |
bgcolor="..." |
Background color of the cell. |
| |
background="..." |
Background image of the cell. |
| |
bordercolor="..." |
Border color of the cell (Internet Explorer). |
| |
bordercolorlight="..." |
Light border color for 3d look. (Internet Explorer) |
| |
bordercolordark="..." |
Dark border color for 3d look. (Internet Explorer) |
| <td> |
|
Begins the table data cell. |
| |
align="..." |
Horizontal alignment of the cell content. Values are left, right and center. |
| |
valign="..." |
Vertical alignment of the cell content. Values are top, middle, bottom, and baseline. |
| |
rowspan="..." |
The number of rows the cell will span. |
| |
colspan="..." |
The number of columns the cell will span. |
| |
nowrap |
Prevents cell content from automatically wrapping. |
| |
width="..." |
The width of this cell, expressed in pixels or percentage. |
| |
bgcolor="..." |
Background color of the cell. |
| |
background="..." |
Background image of the cell. |
| |
bordercolor="..." |
Border color of the cell (Internet Explorer). |
| |
bordercolorlight="..." |
Light border color for 3d look. (Internet Explorer) |
| |
bordercolordark="..." |
Dark border color for 3d look. (Internet Explorer) |
| </td> |
|
Closes a table data cell. |
| </th> |
|
Closes a table header cell. |
| </tr> |
|
Closes a table row. |
| </table> |
|
Closes a table. |
Note: Table headers functions as table data cells, with two differences:
- Text in a table header cell is automatically made bold in most browsers. Where you see bold text in the chart above is where I used table headers. Table headers are used where there are rows and columns of information that is presented as a chart, such as above, but not in tables used as page layout mechanisms.
- Screen readers are better able to reference the material in the chart for the visually impaired than without the use of headers.
Table headers can be used horizontally across the top of a chart, vertically down the side of a chart, or both. Yes indeed.
Acknowledgement: Some of the attributes in the above chart are deprecated. The Inner Circle members area features up-to-date tables tutorials and an up-to-date and more comprehensive reference chart section (there are over 30 reference charts). The deprecated attributes shown can still safely be used, but may become obsolete years from now. This page will be updated when I finish a couple big projects underway.
Additionally, bordercolorlight and bordercolordark are proprietary attributes that only work in Internet Explorer and browsers that use the Internet Explorer rendering engine.
|
Almost a Newsletter
Changing list hosts. Will post a new subscribe form shortly.
Did you know...
The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
|
