All About HTML Tables

Tables are used on websites for two major purposes:

• The obvious purpose of arranging information in a table



• The less obvious - but more widely used - purpose of creating a page layout with the use of hidden tables.

Using tables to divide the page into different sections is an extremely powerful tool.
Almost all major sites on the web are using invisible tables to layout the pages.

The most important layout aspects that can be done with tables are:

• Dividing the page into separate sections.
  An invisible table is excellent for this purpose.



• Creating menus.
  Typically with one color for the header and another for the links following in the next lines.



• Adding interactive form fields.
  Typically a gray area containing a search option.



• Creating fast loading headers for the page.
  A colored table with a text on it loads like a bullet compared to even a small banner.



• Easy alignment of images that have been cut into smaller pieces.



• A simple way to allow text to be written in two or more columns next to each other.

The importance of using tables for these layout purposes can't be overrated. However there are a few things to keep in mind when doing so.

Most important is, that the content of a table is not shown until the entire table is loaded. If you have extremely long pages, you should divide it into two or more tables - allowing the user to start reading the upper content while the rest of the page is loading.

Tables are defined with the <table> tag.

To insert a table on your page you simply add these tags where you want the table to occur:

<table> </table>

The above table would be of no use since it has no rows and no columns.

---

ROWS:

To add rows to your table use the <tr> and </tr> tags.

Example:

<table> <tr></tr> <tr></tr> </table>

It doesn't make sense to write the above lines in itself, cause you can't write content outside of table cells.

If you do write things outside of cells it will appear right above the table.

---

COLUMNS:

You can divide rows into columns with <td> and </td> tags:

Example:

<table> <tr> <td>This is row one, left side.</td> <td>This is row one, right side.</td> </tr> <tr> <td>This is row two, left side.</td> <td>This is row two, right side.</td> </tr> </table>

Result:

This is row one, left side. This is row one, right side. This is row two, left side. This is row two, right side.

---

The following properties can be added to the <table> tag:

Property Description align= left center right left align table center table right align table background=filename image inserted behind the table bgcolor=#rrggbb background color border=n border thickness bordercolor=#rrggbb border color bordercolordark=#rrggbb border shadow cellpadding=n distance between cell and content cellspacing=n space between cells nowrap protects agains linebreaks, even though the content might be wider than the browser window. frame= void, above, below, lhs, rhs, hsides, vsides, box removes all outer borders shows border on top of table shows border on bottom of table shows border on left side of table shows border on right side of table shows border on both horizontal sides shows border on both vertical sides shows border on all sides of table  valign= top bottom aligns content to top of cells aligns content to bottom of cells width= n,n n,n% minimum width of table in pixels minimum width in percentage of window size

Note:
Table properties are set for the entire table.
If certain properties are set for single cells, they will have higher priority than the settings for the table as a whole. 

These settings can be added to both <tr> and <td> tags. 

PROPERTY DESCRIPTION align= left right center aligns content to the left of cells aligns content to the right of cells aligns content to the center of the cells background=filename sets a background image for the cells bgcolor=#rrggbb sets a background color for the cells bordercolor=#rrggbb sets color for the border of cells bordercolordark=#rrggbb sets color for the border shadow of cells valign= top middle bottom aligns to the top of cells aligns to the middle of the cells aligns to the bottom of cells width= n n% specify a minimum width for the cells in pixels specify a minimum width for the cells in percent of the table width height= n n% minimum height of cells in pixels minimum height of cells in percentage of table height

These settings are only valid for <td> tags.

PROPERTY DESCRIPTION colspan=n number of columns a cell should span nowrap protects agains linebreaks, even though the content of a cell might be wider than the browser window rowspan=n number of rows a cell should span

Note:
Settings for columns(<td> tag) have higher priority than settings for rows(<tr> tag).

Settings for cells (<tr> or <td> tags) have higher priority than settings for the table as a whole(<table> tag).