intro | design software | page elements | site structure | measurements | fonts | images | colours | layout | tables | templates

the studyzone | web design | course tasks: 1 | 2 | 3

the basic principles

tables [part 1 part 2]

At the design stage you should be able to see roughly how your page elements could fit into a particular number of rows and coloumns. For example, a banner heading could occupy the top row, spreading across all the columns.

A navigation bar might occupy the second row, possibly with each link being in a separate cell across the width of the table.

Below that your content may be divided across the page in columns, maybe an image or graphic on the left and two columns of text.

At the foot of the page might be some information about the site or organisation occupying the whole width of the final row in the table.

This example requires a table with four rows and three columns.

More complicated layouts may require more rows and columns, often tables within tables but the basic idea of having a rectangle, or cell, for each element makes designing so much easier.

Table properties

When you insert a table in Dreamweaver you need to set its properties. You'll have an idea for the number of rows and columns but there are other things you need to know.

Width

Set the table width in pixels. 760 pixels is a good number if you're designing for an 800 pixel browser window. You can use up to 1000 if you are only designing for more modern displays.

Height

Set the table height as something like 90%. This will usually mean the whole table will be visible in a normal window.

Border

Borders are lines around table cells. They look horrible. Don't use them, set the Border value to 0. A blank in that box will mean the default setting which is likley to be 1 which you don't want. (You can make nice borders using some more advanced techniques covered later in the course)

Cell spacing and cell padding

Spacing is the distance between cells. Padding is the space between the edge of the cell and where content is positioned. You will need one of the two, if not both, in most instances. Without spacing or padding, text in one cell will go right up against text or an image in an adjacent cell and look wrong or be difficult to read. Probably both.

Spacing and padding are also measured in pixels and small numbers between 3 and 7 usually work best.

Because your page layout is important, and you will be using it throughout large sections if not all of your site, it is worth spending time to get it right at the start. Experiment with different settings and sample content and see the results. Once you have got it right, save the page as something like sample.htm and it can be used as a template for the actual pages later.

Alignment

Something that you may not be able to set in the first panel for the table is where it sits on your page. The default in Dreamweaver MX is on the left. You will invariably prefer it centered. Select the table (click on <table> in the list of tags at the foot of the application screen) and choose Alignment Centre.

It looks odd

Yes, it will, without any content. It will be spread evenly across the editing area and if you start typing in cells they'll change size in a bizarre manner. You need to set some more measurements first!