Introduction to Using Tables in HTML (Hypertext Mark-up Language)

Tables are a useful and efficient means by which to organize information on a website.

Common uses of tables are to display tabular data, such as the following:

Average Income
Deans Faculty
CCE $40,000/year $2,000/year
URI-Kingston $60,000/year $8,000/year


There are several aspects to tables which can be broken down into the various components of the table. The Table tag in itself has several aspects to it:
  • The border of a table refers to the thickness of the line around the table.
  • The cellpadding of a table refers to how much space there is between the border and the individual cell contents.
  • The cellspacing of a table refers to how much space there is between the individual cells of the table.
  • The bgcolor of a table refers to the background color for the table.
  • The background of a table refers to the background image used throughout the table.
  • The width of a table refers either to a specific number of pixels wide or a percentage of the page's width.
  • The height of a table refers either to a specific number of pixels wide or a percentage of the page's height.
Let's look at an example. The following is a 2x2 table with a border of 5, cellpadding of 3, cellspacing of 10, the width set to 50% of the page's size, the height set to 200 pixels, and a red background color:

Cell 1 Cell 2
Cell 3 Cell 4


This next table is identical to the previous one, but the cellpadding is now 10 and the cellspacing 3 and the border is 1:

Cell 1 Cell 2
Cell 3 Cell 4


Tables are composed of specific cells. Cells can be classified as either table headers (using the <TH> command) or table data (using the <TD> command). Attributes of table cells include:
  • Cell height or width.
  • Cell span (i.e., how many cells across a column or row does a cell span)
  • Cell background color
  • Cell background image
For example, the following table is a 3x3 table, with some specific twists. Cell 2, for example, spans across two colums, and cell 4 spans across two rows. The background color for the table is a light blue, but cells 1, 5 and 7 have different colors for their specific backgrounds. Cells 1, 2, 6 & 7 are also set to specific heights of 100 pixels and the table is set to a width of 80%.

Cell 1 Cell 2
Cell 3 Cell 4 Cell 5
Cell 6 Cell 7


Some interesting layout effects can be produced this way, which don't necessarily look as though you're using tables.

Your Main Title.

Various page elements, possibly including:
  • A list of items explaining what the page is about.
  • A quote, or possibly some sort of slogan or logo.
Something inspiring or meaningful.
Sidebar for the page, such as a list of other links.
Other resources

Web Design Tips

The virtual color wheel







web@songweaver.com