Tables
Tables rival images as the most-used feature of HTML pages. Getting information, both text
and images, aligned for easier viewing is done on virtually every web site and is
made possible by the HTML tags that specifically support table generation.
Even though creating tables is a bit tedious (less so if you're using one of the many
WYSIWYG HTML Editor applications), it is well worth the effort to create a clean-looking, orderly
web page.
Return to top of document
Introduction
Of the ten HTML tags that support the creation of tables within an HTML page (web page),
only a few are commonly used:
- table - start of a table
- tr - start of a row
- th - start of a header for a column
- td - start of a cell (column) in a row
- caption - text to put at top or bottom of a table (outside the border)
The <html> tag pair starts and ends a table. Then the table is built row by row (the
<tr> tags), with as many columns (the <td> tags) as desired. Here's the code
again with some sample data, and the tables it would be displayed.
| Basic Table Tags | Basic Table Tags with Content
|
|---|
<table>
<caption></caption>
<tr> <td> <td>
<tr> <td> <td>
</table>
|
<table>
<caption>Sample Caption</caption>
<tr> <td> upperleft <td> upperright
<tr> <td> lowerleft <td> lowerright
</table>
|
| Resulting Table | | Resulting Table With a Border
|
|---|
Sample Caption
| upperleft | upperright
| | lowerright | lowerright
|
|
|
Sample Caption
| upperleft | upperright
| | lowerleft | lowerright
|
|
As with most other HTML tags, these tags support several attributes which
are useful in adjusting the appearance of the table. The next two sections
go over all ten table-related tags and their attributes.
Return to top of document
Tags
The tags mentioned above, <html> <tr> <th> <td> and <caption> are used in
most tables but there are 10 table-related HTML tags available. Here's the complete list, including some
of the most frequently used attributes of those tags.
| Tag | Description | Frequently Used Attributes
|
|---|
| <table> | table | border, cellspacing, cellpadding, bgcolor, align
| | <tr> | row | align, nowrap
| | <td> | cell | align, valign, colspan, rowspan, nowrap
| | <th> | header | align, valign, colspan, rowspan, nowrap
| | <thead> | header | none
| | <tbody> | body | none
| | <tfoot> | footer | none
| | <caption> | caption |
| | <col> | column | span, align, bgcolor
| | <colgroup> | column group | span, align
|
The <caption> tag simply puts a caption next to the table. The caption
can be above or below the table, and is placed outside any table border.
The <thead>, <tbody>, and <tfoot> tags work together to partition
the table into sections. All three can be used to group rows together. The
<thead> and <tfoot> row groups will display as normal rows but when
the table is printed both row groups will be included at the top and bottom, respectively,
of the printed table.
The basic HTML table model is row-centric. With the <col> and <colgroup> tags
a table can be dealt with as a collection of columns, with attributes set at the column
level rather than at the row level.
Return to top of document
Attributes
Here are some of the commonly-used attributes for the primary table-related tags. Most
require a numerical value. Where specific values must be used, the allowed values are
shown in brackets []. The nowrap attribute requires no value. To use it, simply insert
it into the appropriate tag. For information how to enter color values,
see the colors section of this site.
- <table>
- border: thickness of the border around the table (pixels)
- cellpadding: space between the edge of a cell and its contents (pixels)
- cellspacing: space between cells (pixels)
- bgcolor: color of the background
- align: alignment of the table to surrounding text [left | right]
- <tr>
- align: horizontal alignment of cell contents [left | center | right]
- valign: vertical alignment of cell contents [top | middle | bottom | baseline]
- bgcolor: color of the background
- <th> or <td>
- align: horizontal alignment of cell contents [left | center | middle | right]
- valign: vertical alignment of cell contents [top | middle | center | bottom | baseline]
- colspan: number of columns the cell extends
- rowspan: number of rows the cell extends
- nowrap: do not use word wrap within the cell (no value)
- bgcolor: color of the background
A full listing of tags and attributes is available at the
reference section of this site.
Return to top of document
Examples
Here are some other examples of commonly used attributes and their effects - column
spanning, row spanning, and background colors.
| Use of colspan: | | Resulting Table
|
|---|
<table border=2 bgcolor=yellow >
<tr><td colspan=2>one<td colspan=2>two
<tr><td>A<td>B<td>C<td>D
<tr><td>1<td>2<>3<td>4
</table>
|
|
|
| Use of rowspan: | | Resulting Table
|
|---|
<table border=2 >
<tr><td bgcolor=#ffcccc rowspan=2>one<td>A<td>B
<tr><td>C<td>D
<tr><td bgcolor=#ffcccc rowspan=3>two<td>1<td>2
<tr><td>3<td>4
</table>
|
|
|
| Use of rowspan and colspan:
|
|---|
<table border=2>
<tr><td bgcolor=fuchsia colspanpan=3 align=center>one
<tr><td rowspan=2 bgcolor=yellow>one<td bgcolor=silver>A<td bgcolor=#ffcccc>B
<tr><td bgcolor=#ffcccc>C<td bgcolor=silver>D
<tr><td rowspan=2 bgcolor=yellow>two<td>1<td bgcolor=#ffcccc>2
<tr><td>3<td bgcolor=#ffcccc>4
</table>
|
|
|
| Resulting Table
|
|---|
| zero
| | one | A | B
| | C | D
| | two | 1 | 2
| | 3 | 5
|
Return to top of document
Tips
Tables are pretty straight-forward but there are a few things to know about that might
cause you some trouble.
- Empty Cells - when tables are built they do not create borders around empty cells. Use the special code  , which represents a space to put something in the cell so that the border is displayed.
- The end tags </tr> and </td> are not usually needed. Today's browsers will automatically fill them in as needed.
- If you want a table indented from the left side of the page, enclose it between a pair of unordered list tags (<ul>...</ul>), with no <li> tag.
- Tables can be embedded. The contents of a cell in one table can be an entire table.
- Use the <caption> tag to create a title for a table. This is easier than creating a row with a single cell which spans the entire width of the table.
- The <th> header tags can be used anywhere in the table. They don't have to go only in the first row. I often put them at the top and bottom of the table, especially for long tables.
|
