Using Tables to Construct Web Pages

The table feature in HTML is a very versatile tool in constructing Web Pages.  Many of my Web Pages have been constructed using tables, but they are invisible to the user.  Tables are used to control the layout of text and images on a page.  For example, in the Webbits title at the top of this page, I have used a table to hold the text titles and the butterflies, but the grid lines are hidden.  The flowers on the left are on the page background, not in the table.  The table structure is really something like this:
 

From the small table above, notice the following features:

• The grid lines are visible, and I have set them to a width of 6 pixels.
• The cells have a background color which can be applied to a cell, a row, or a table.
• The cell contents can be centered, or justified top or bottom, and left or right within a cell.
• The top row consists of one cell which spans three columns.
• An entire table can be centered horizontally, or justified left or right on the page.

• Use tables to control the placement of pictures and text side by side, like this:

Let's get started!

• Use tables to center a block of text on the screen with a table one cell by one cell, and a fixed cell-width, like this:

• Use tables to place text or images in columns across the screen, like this:

Ladybird	Dinosaur	Cow	Crab

• Here is the same table with the grid lines removed.

Ladybird	Dinosaur	Cow	Crab

• Use automatic adjustment of cell-widths in tables to fill the screen, in any screen mode.

This text in this box will be automatically adjusted so that the table will extend to the full screen-width in whatever screen mode the user is using.

• A cell in a table can hold just about anything - headings, text, pictures, bullets, other tables, etc.  Here is a table containing bullets and another table.

A Cell in a Table can contain Text Pictures Bullets Other Tables	The Cell below contains another Table

When I create tables, I use the Netscape Composer which is included with Netscape Navigator.  This Web Page Editor contains built-in features for creating tables which are very easy to use.  To create a table, just click on the Table Button on the Button Bar, and then, to display the pop-up windows to choose your table properties, click on the right mouse button.  When you use a Web Page Editor in this way, you never need to look at the HTML coding when creating tables.  The modifications that you make to a table are immediately displayed on the screen.

Back to Webbits Home Page

Back one page

Top of this page