|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
||||
|
|
|
|
||
The best way to get started with a more sophisticated web page design is to actually sketch it out on paper then determine how many tables (tables within tables) rows, columns, etc. you will need to accomplish the look you are trying to achieve.
Below are some of the more advanced features for building tables. The examples are all done using Claris HomePage. If you are using different web authoring software you should still be able to accomplish the same things, you will just have to hunt for the same features in the program that you are using.
Controlling
Table Width - The default setting for
controlling the width of a table is auto. The possible problem
with that is that if you designed the look of your page with
the browser window adjusted to a certain width, the end user can
adjust their browser window to something different, ergo the
look you intended is not what they see (all kinds of nasty
things happen: text wraps, graphics move , things don't line up
correctly, etc).
The way to control table width more accurately is by defining the number of pixels for the table width. (NOTE: Remember that many of your web site users may still have monitors that scan 640x480 pixels. Do not design your web site so that users have to scroll left/right to see the contents of your site -- totally lame :-)
To set the width of a table in pixels:
Controlling
Cell Width - The default setting for
controlling the width of a cell is auto. Once again this
setting for cell width can adversely effect the look of your
web site.
When setting the width of a cell you need to remember that the total widths of the cells in a row must add up to the total width of the table!
To set the width of a cell in pixels:
Borders
- Changing the value of the table border can really change the
look of your web page. The default setting for table border is 1.
Increasing the value will cause the outside edges of your table to be thicker and more 3-D like.
Setting the value to 0 will cause the table border and grid to disappear. Claris HomePage will show dashed lines so that you can still tell where the table is and work with the table. This method (of setting the border to 0) is how professional web masters create a sophisticated look for their web sites without the table showing!
Take a look at this site. The layout was done in a table that looks like this:
Padding
- Table padding changes the minimum spacing (in pixels) between the
cell wall and the contents of the cell. The default setting for
padding is 1 pixel.
Compare the two tables below. The first one has the default table padding setting of 1. The second had a table padding setting of 10.
Spacing
- Table spacing changes the width of the grid lines in a table. The
default setting is 2 pixels.
Compare the two tables below. The first one has the default table spacing setting of 2. The second has a table spacing setting of 10.
Cell
Span - It is possible to stretch or
span a cell across rows or down columns.
One way to span a cell is to select the cell you want to span, then 'click-and-drag' the small square in the bottom right-hand corner of the highlighted cell across the additional cells.
The other way to span a cell is to select the cell you want to span, then in the object editor, select the cell tab, then enter the value for the number of cells to span.
Colors and
backgrounds - You can change the color of
cells or even set a background image for a table or cell.
1. To change the color of a cell(s), select the cell(s).
From the object editor select the color you want from the pop-up menu.
2. To add a background image to a table or cell, select the table or cell.
From the object editor, select set
Select the image you want for your table background. Remember that background images tile into the background and that all images are not appropriate to use for backgrounds.
