|
Tables are the way we
format our pages and allow you to do all sorts of
placement. It is the way you format your pages to make
sure your text and graphics stay where you put them.
Once you have mastered tables and seen how they work,
you can also use the same technique in your word
processor and some other windows programs. It is a great
way of controlling layout.
Word
Processor
Have you ever had trouble
when you have a list of names and then tried to put some
figures next to them in a document? Getting them to line
up can sometimes be very frustrating! By using
tables you can control this a lot easier. It is also a
great way of putting text next to a graphic and making
sure it stays there.
Building
some tables
We will set up a new page
and show you how to set up your own tables. Open up your
composer. Choose "new page" from the tool bar.
Choose "blank page". Remember how we put in
the background. Format - page properties - find the
graphic using choose file and pick the bg_bu graphic. We
now have a page with the background in place. To get the
text into the right place we use tables.
 |
On the
toolbar find the tables icon and click it. You
will be presented with a box with a lot of
choices. We will come back to it in a minute.
Just choose OK at the bottom. You will now
notice a table with two sections has appeared.
We can now manipulate these tables to suit our
layout requirements. |
Place your cursor in the
first cell and right click. Choose table properties
which will bring up the properties box again. In the
borders line width you should put a "0". This
will mean no one can see the actual borders of the
table. By increasing this number you can make the border
visible and wider as the numbers increase. We will leave
it at "0" for now.
The next two boxes are
fairly self explanatory. We will leave the cell spacing
but change the cell padding to "10". This is
the space in between the cell border and your text.
In the table width you
can enter 600 and change the box with "% of
window" in it to pixels. There is a lot of
different considerations and if you would like a more
technical explanation click
here
Now go to the top of this
menu and choose the cell tab. In the Horizontal
alignment choose left and in the vertical
alignment choose top. This means that this cell
will start all the text you input on the top left hand
side 10 pixels in from the border.
|
Border
10 - Padding 10 - Spacing 10
|
Add
colour to the border
|
In the cell width choose
80 and change the % window to pixels again. Leave the
rest and choose OK. You can now type some text in each
of the boxes you see. It works just like a word
processor for this. Now click on the preview icon and
when it asks you to save choose "price" as
your option. Now go back and change some of the options
in the table and cell attributes and click the preview
icon and see what happens. From now on it is just a
matter of trial and error to get the effect you want.
You can now add the word
"price" to the side bar on all your other web
pages and do the links, as before. Also you might like
to add the word "Home" and link to the index
file which will be your first page when you enter the
site. This usually contains your welcome and outline for
the site.
In Netscape the cells
tend to expand to fit the text, however, in some other
programs it will lock the borders and wrap the text.
Remember if you make a mistake you can undo it.
Finally, set your cursor
in the second cell to the right. Again, click on the
tables icon and choose OK. You now have a table within a
table with its own set of attributes. This is especially
useful if we want to put in a price list, etc.
So that is very simply,
tables. You can insert graphics and copy and paste your
text into these cells. You may need to reformat the text
using the toolbar, just like a word processor.
Additional
Features
One last feature of
tables you may like to use. Click on a new blank page
again and put in the same table as before. Simply
click the table icon and OK. Now place your cursor in
the first cell and right click to open up the
properties. Choose table and then the cell tab.
Now go down to the cell background and tick the use
colour. Pick any colour you like and then OK. This will
act a bit like a background in that you can type and
insert graphics over the colour of the cell. To change
the text colour use the combo box on the toolbar. This
is a very simple way of adding some colour. I use it on
this page. Try to duplicate this layout for practice.
To see a graphical
representation of tables click
here. Just use the back arrow to return here.
Web pages allow
you to use images and text in a host of different ways.
One of these ways is to split the image or text with
Image Maps.
|
