Step By Step
Chap 5 Page 1

Chapter 1 The Tool Bar
Chapter 2 Page Properties
Chapter 3 Text
Chapter 4 Images
Chapter 5 Tables
Chapter 6 Targets and Links
Chapter 7 Sound
Chapter 8 Using Backgrounds and Borders




Tables



In chapters 1 thru 4 you learn the basics of a web page. You have what you need to make a basic web page now, but what about the more advanced topics. Well, I'll cover a few of those too.

Tables are my favorite way of formatting the look of my page. If you will look at the Table of Contents at the top of this page, I used a table with two columns and ten rows to align my text with. I used a border width of zero so that the table itself wouldn't show up.

So just what is a table. The easiest way is to think of a table as a collection of boxes arranged in columns and rows. The columns go up and down and the rows go sideways. You can put anything inside a table that you could put on the regular page. Below I have made a table with 4 columns and 3 rows. Also each box is a separate paragraph, so alignment properties can be assigned for each box or you can have more than one paragraph in a box and have different alignments for each. Think of each box as being it's own page.
. . . .
. . . .
. . . .

So let's walk through making a table. Put the cursor on the page where you want to make a table. Click on the table button in the first toolbar, it looks like a waffle. The first two entries are:
Number of Rows and Number of Columns. Let's make a table with 5 rows and 3 columns. Rows are horizontal and columns are vertical. Type 5 in the box by Rows and 3 in the box by columns.

Layout is next. First is the border width. This is the outside border of the box. If you want no border at all enter zero. For this table we are going to lift it off the page and give it a 3-D look. Enter a value of 10 for this. The next line down is pixel pacing between cells. This is the line inside of the table. Leave this at one or two, or experiment some with larger numbers. If you enter a value of zero for the border width, then the lines inside the table won't appear, but the cells are still spaced as if they are. Next, Pixel Padding Within Cells will put an invisible padding between whatever you put into one of the cells and the cell wall. Leave this at one. Across from this is the Alignment. This is the alignment for the entire table, but not it's contents. Each cell has it's own alignment. So ,choose whether you want the table on the left hand side of the page, the right hand, or centered in the middle.

Next up is the Caption. If you choose to use a caption, the table will add one cell to the top (or bottom if you choose that option), that will stretch across the entire row. This is good for adding a title to your table or a footnote. Under that is the table width. You will see a drop-down menu button to the right. You can specify whether the table will cover 100% or less of the page width or specify a set size in pixels. If you know anything about the monitor you are using , you have it set to display in a certain size or resolution. e.g.. 640X480, 800X600, etc. These numbers are in pixels. a pixel is a dot on your monitor. It's usually best to set the window as a percentage of the page. Let's put our table at 90%, so type 90 in the box and make sure the button is set to percents. Skip the table height, it will find it's height by itself.

The Next part is the fancy stuff. Leave the extra HTML button alone. The first button turns on and off the equal columns. The default is on. The last part is the table background. You can assign a color or a graphic background for the table. The graphic background only works on newer browsers.
If you want to give the table a color, click the background button on. The default color is white. If you look next to the background button you will see a white square. Click inside this square to change the table's color. If you want to use a graphic image click on the use image button and then enter the file name the same way you did for the page background. Click OK and you are done.

YOUR TABLE SHOULD LOOK LIKE THIS
. . .
. . .
. . .
. . .
. . .

To add anything to the table, click inside the cell you want and then type away, cut and paste, or insert an image just like anywhere else on the page. Remember also that if you end up with too many coluymns or rows you can remove the excess by clicking on EDIT-->DELETE TABLE-->ROW.




NEXT

The PUB Main
FTP Downloads/Instr.
FordPub.com
Step by Step
The PUB Font Archive
Search Engine Submitting
Web Graphics
Ask the Webmaster
Web Tools
Simple Page Writer
You Are Visitor number