Using Tables

Tables Overview

Using a table is a good way to present multiple data in a more readable form and this guide will be handy when you need to add a table structure to your website.

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 destroy your carefully laid out web page.
• Tables on Web sites are used to present information in a particular way and are by far the most popular way of organizing a 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 the creation of more visually interesting pages.
• Tables help designers lay out text and graphics on 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 on 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 the 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 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.

Creating A Table

Creating a Table Guide

Creating a Table Advanced Guide

Deleting A Table

To delete an existing table while in edit mode of the page:

Insert or Delete Rows

A new row can be inserted into an existing table while in the edit mode of the page.

Insert or Delete Columns

A new column can be inserted into an existing table while in edit the mode of the page.

Merge Column or Row

If you want to merge columns or rows in the table on your website:

Creating Two Cells from One

When you want to create two cell from one cell.