What is a Table and how can it help me?

A table is a grid of cells that may have visible or invisible borders to align text and images.

Tables offer the facility to lock the relative position of objects on a web page. HTML code does not have a command equivalent to a [TAB] key, so you need to create a table to hold the text in place. For example a common everyday use of a table is a timetable, where the columns and rows represent the times and days.

Creating a table

The following is a simple table.

This is a simple table, with narrow borders. You can create a table with invisible borders, so objects appear to be locked in space!
Tables can contain Text, Images or other Tables! You can also alter the border colour and width, and the background colour of the cells.

You can specify the width of the table border or make it "0" if you want the table to be "invisible". There is a cellspacing option that sets the size of the gap between the cells and a cellpadding option that sets the internal margin of the cells. This will stop text from reaching the edge of the cell.

The size of the table is controlled using the width and height settings. You can specify these in pixels (that will fix the size no matter what size of browser window or screen resolution the page is displayed in) or as a percentage of the screen dimensions (so the table will appear a different size dependant on the size of browser window or screen resolution the page is displayed in).

You can use an image as the background to a table, but the result is different depending on what browser is used to view the page. If you specify an image as the background to a table (where the width and height of the image are the same as the table) Microsoft Internet Explorer will overlay the table on the whole image. However Netscape Navigator will try to put the entire image in each cell of the table, that will be too small for all of it to be seen. You can still successfully use an image as the background to one or more cells and the image will appear in that cell, or tiled if the cell is larger than the image.

Example

This is a table with three columns and two rows, but the outline is hidden so that the text and graphics in it appear to be fixed. You could lay out and entire page in one or more tables like this.

The text in each cell of the table can be formatted just like any other text. The cells in the table can be coloured like this one. This cell has a background image.
The image of the bike on the right seems to be fixed ... Harley ... but it is placed in a cell of the table.