Tables using Netscape & Basic HTML

Using Tables
With Netscape Communicator

** To create a table with HTML Code, scroll this page.

I use tables on almost every page I create. Tables are great for helping to space your text evenly on the page. I do not like page that extend all the way to the edges of your screen. I use a borderless table set at 95% of the page to help position paragraphs.

To create your table on a page using Netscape Composer (Communicator) It is so easy and no HTML is needed. Follow the steps below:

After opening a new blank page, click on the Table button.
Choose the number of rows and columns you wish for your table.
Choose your Alignment. I always center the table itself on the page.
If you wish a caption or title to your table check "Include Caption" and choose the placements of the caption.
Choose your attributes: Border Line width (Use 0 for no border). Cell spacing to set space between cells (I usually use 10). Cell padding determines amount of space around the inside of the cells. (I usually use 10 there too)
Choose the % of the width of the wondow you wish your table to be. (I use 95% for normal text and 75-85% for indented text).
I check equal column widths because I can set them later if necessary.
If you would like the background of the table different then your page, check Table Background/Use color.
Click the color square for the palette and choose your color.
If you want a background image check Use Image and choose your own image.
Click Apply/Close.

You can now enter your text or graphics in the table, using a cell for each paragraph etc. You can also put a table within a table cell in the smal manner as above. You may want to do this to put in several pics and keep them separated. The paragraphs above and done in tables. The Geoguide, heading and first 2 paragraphs are set at 95%, the next paragraph is a table within the table set at 80% to make it appear indented but nicely aligned. The background is set at light yellow.

If you need to add another row to a table all you have to do it hit "tab".

Using Basic HTML
to Create or Edit Tables

If you wish to create tables with HTML or edit your page with the Geocities Advanced Editor, it is a good idea to learn some basic HTML codes for table. I'll try to make it as simple and painless as possible.

<TABLE ...></TABLE> All other table tags must be contained between these codes or they will be ignored. The values for your table, such as border, cell spacing, cell padding, and columns, will be part of the opening code. To center your table <CENTER></CENTER> are added before and after the table.

<TR></TR> This stand for the table row. The content of that row will be contain within these codes.

<TD></TD> This stands for each cell of a row. Data cells must be contained within the table rows. Each row need not have the same numbers of cells.

Example: A row with 3 cells would look like this:

<TR><TD>your data in first cell</TD><TD>your data in second cell</TD><TD>your data in third cell</TD></TR>

<CAPTION ...></CAPTION> This stands for the caption for a table. CAPTION tags should appear inside the TABLE but not inside table rows or cells.

THE TABLE ATTRIBUTES

BORDER=value This attribute appears in the <TABLE.....> Tag. If present a border is drawn around all cells of the table. You can determine the width you desire. Borderless tables are useful when you want to use tables for layout purposes, but you don't necessarily want the outline of an actual table on the page.

CELLSPACING=value cell spacing is the amount of space inserted between individual cells in a table.

CELLPADDING=value Cell padding is the amount of space between the border of the cell and the contents of the cell. Setting a cell padding of zero on a table with borders might look bad because the edges of the text could touch the cell borders.

Your opening tag may look like this:

ALIGN=value If appearing inside a CAPTION it controls whether the caption appears above or below the table, and can have the values top or bottom, defaulting to top.
If appearing inside a TR or TD it controls whether text inside the table cell(s) is aligned to the left side of the cell, the right side of the cell, or centered within the cell. Values are left, center, and right.

VALIGN=value Appearing inside a TR, TH, or TD it controls whether text inside the table cell(s) is aligned to the top of the cell, the bottom of the cell, or vertically centered within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline. Values are top, middle bottom, and baseline.

Your code for a simple table with 2 rows, 2 columns may look like this:

<TABLE BORDER=0 CELLSPACING=5 CELLPADDING=5 COLS=2
WIDTH="95%" BGCOLOR="#FFFFFF">
<TR> (starts first row)
<TD> (starts first cell of first row)
******(first cell of first row text or images goes here)
</TD> (ends first cell of first row)
<TD> (starts second cell of first row)
******(second cell of first row text or image goes here)
</TD> (ends second cell of first row)
</TR> (ends first row)
<TR> (starts second row)
<TD> (starts first cell of second row)
******(first cell of second row text or image goes here)
</TD> (ends first cell of second row)
<TD> (starts second cell of second row)
******(second cell of second row text or image goes here)
</TD> (ends second cell of second row)
</TR> (ends second row)
</TABLE> (ends table)

Most of the information here was obtained from "Teach Yourself Web Publishing with HTML 3.2" Third Edition and "The Official Netscape Communicator 4 Book". There are many books where you could obtain much more information. I hope this will cover the basics to get you started with tables.

If you have any questions, E-MAIL me and I will find the answer for you.

Good Luck!

[Tutorial Index] [Photo Carousel] [Lake Applet] [Snow Applet] [Tables]
[Adding Graphics] [Adding Sound] [Adding Backgrounds] [Color Chart]

Fishing In Wisconsin
Table of Contents