Using Tables

Why Use Tables?

Aside from the obvious use of tables to present information to a website's visitor in a tabular form, tables are extremely useful in website design.

If you were to simply place text and graphics on your web page it may look good in your web browser. But, because visitors use a variety of browser window sizes the content will flow to fill their window. This may completely destroy your carefully laid out web page.

A table consists of Rows and Columns. When a row and a column intersect, or meet, the intersection point is called a cell.

Below is an example of a table and its elements - Rows, Columns and Cells and how to reference them.

	Column 0	Column 1	Column 2	Column.		Column n
Row 0	Cell (0,0)	Cell (0,1)
Row 1	Cell (1,0)	Cell (1,1)
Row 2	Cell (2,0)	Cell (2,1)
Row 3			A Cell
Row.
Row n	Cell (n,0)					Cell (n,n)

Definitions of table elements :

Rows	run horizontally across the table (Purple, yellow)
Columns	run vertically down the table (Blue, green)
Cells	the point where a column and a row meet (Red, Crimson)
Cell reference	Each cell has a unique cell reference number expressed as (x,y), where x = row number and y = column number. Example : (2,1), the red cell is the cell in row 2, column 1
Border	the solid black line around the table
Grid lines	the light grey lines outlining each cell.

Tables serve several functions:

	Tables allow for greater control over page layout, allowing creation of more visually interesting pages.
	Tables help designers layout text and graphics in the page so that they remain in specific places and relationships to other information on the page.
	Tables also help determine what happens to the content of a web page when the browser window is re-sized.
	Tables are also used to set apart sections of documents, such as in sidebars, navigation bars, or framing images and their titles and captions.

Often tables are not visible to a site's visitor pages. Grids and columnar layouts use tables often invisible, to control page layout.

Many Web pages utilize tables as the primary means of controlling placement of page elements. This is often done with an invisible table. This example uses an invisible table to create three distinct areas Sites with newspaper-like layouts are using tables. These sites show distinct columns to create the columns. Distinctly coloured backgrounds for separate cells in a table can be created to highlight and separate information.