Simply Guides

 

Dreamweaver 4

 

Part 1 – Creating Tables

 

Arguably one of the most versatile and crucial elements in a web site is the table. The table function in Dreamweaver is designed to make life easier for the web designer.

Although tables can be altered at any time during the process, it is, as with everything, a good idea to have at least a rough idea of what you want before you start, eg. the overall shape and size you need to contain the text, graphics, pictures, buttons etc, which you intend to use.

 I would suggest that you firstly place the Object Palette and the Property Inspector on the working area. Go to Window and select Objects, and Properties.

 

 

Click the expander button on the Property Inspector box to reveal all the properties.

 

To start creating a table, you can, if like me you prefer to work with the Object Palette open, click on the second left icon down.

 

   

However, many people prefer to have a clean uncluttered work area, in which case you can select Insert > Table from the Toolbar:

 

 Either of these actions results in the opening of the Insert Table window:

 

 You can now enter the details to create your table

 Rows: These can be changed as required.

Columns: These can be changed as required.

Width:  Width and Height can be ‘fixed’- Pixels or ‘Relative’ - Percentage.

Tables set using pixels will give you almost complete control over what the site visitor sees, as the values will not be re-sized if viewed on a smaller or larger monitor who’s settings vary from your own. Because of this you should have restraint over the overall width of your table, to avoid your visitors having to use a scroll bar to see the full table, when viewed on a small monitor.

Tables set using percentages are not stable, as they will expand or contract, causing stretching or wrapping, depending upon the size of monitor used or its settings. Either of these actions will destroy your carefully constructed design. Percentages are ideal for lines/dividers, but I no longer use them for tables.

The choice is yours. Experiment using fixed or relative tables, testing them with differing settings.

Border:  Set to zero if you don’t want the table to be visible, or set to 1 and up to give the effect you require. Experiment with different settings. I find 3 to be about right for me. If you want a coloured border which will add to the overall effect, just click on Brdr Color in the Properties Panel and choose a colour from the pop up colour palette, or type in the code if you wish to match/contrast your page colours.

 

  

Cell Padding: If you intend to insert text in a particular cell, setting the padding to 10 will avoid it being jammed right up to the edge, giving a less cramped appearance.

Cell Spacing:  This field can be left blank, as both Netscape Navigator and Internet Explorer display a default setting of 2.

You now have a table which has three rows and three columns, and a width of 750 pixels.

 

 

The table and cell sizes can be changed either by selecting and dragging, or by selecting the table by clicking on the bottom line and entering the sizes in the Property Inspector.

We will use the Property Panel and enter a height of 600, a border of 3, align to centre, a border colour #336633 (dark green) and lastly give it a name – Barnsley.

 

We now have the following table:

 

Although no cell size has been specified, Dreamweaver has calculated this based upon the number of cells, and the overall table size.

 We can now re-size the cells to suit our needs, or insert the photos and see how the cells stretch to suit. For the sake of this tutorial we will assume we have three photographs, a heading, and some text, to go in the individual cells.

 First we will insert the photos, then the text. Before we do that, select all three cells on the top row, and click on the merge icon. (See Properties Panel below). This merges the cells into one. Repeat this process for the second row where we will place the text header for the Church.

 

 

  This is the same table with the border set to zero:

 

 

Here is the settings for the picture of the pit, those for the miner are reversed, so it is right justified and Horz = Right and Vert = Bottom. The Church is of course centred both ways.

 

 

This “Simply Guide” is just that, a guide to give you enough know-how to get you started. When you need more in depth information, there is a wealth of knowledge on the internet, and you could do worse than looking at Dreamweaver’s own tutorials on this subject.

Good Webbing!

 Robert Johnson

April 2002.