All Snippets
Top 100 Snippets

By Language

GBIC >> Source Code >> HTML >> Snippet

11 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.

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.

Here is the basic code for a table of two rows and two columns:

   < table >
   < caption ></ caption >
   < tr > < td > < td >
   < tr > < td > < td >
   </ table >

And the same table with sample content: 

   < table >
   < caption > Sample Caption </ caption >
   < tr > < td > upperleft < td > upperright
   < tr > < td > lowerleft < td > lowerright
   </ table >

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.

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   none
< 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
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

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
& ampnbsp, 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.