Skip navigation

The layout of a page is most effectively handled by CSS but this can be quite tricky for first time web designers so we’ll use CSS for the styling and use HTML tables to layout the page.

You’ll be familiar with tables from (God awful) programs like Word and Excell. Tables are made up from columns and rows in various combinations to create a lattice that page elements can be placed within.

Each individual table element is called Cell.

All basic layouts can be made with tables, often with tables placed within tables, this is called nesting tables.

Return to your web page and create a paragraph below your link and click Insert>Table.

Let’s create a 500 pixel wide 2×2 table. If you create a table with pixels you have absolute control of it’s width, if you use percentage values your table will stretch to the available width. Most table based sites use a combination of percent and pixel based tables.

You can see Dreamweaver has created a <table> tag with a width attribute. Other attributes include border, cellspacing and cellpadding, I find it makes life easier if you always set these to 0.

Within the table tag it has also created two table row tags <tr> and several cell tags within the rows <td>. It has placed some spaces within each cell, these are represented as &nbsp; (non breaking space).

Unless you specify the pixel values of rows and cells your carefully crafted table will soon start going pear shaped. To demonstrate this try adding some text into a cell, it soon loses it’s original shape.

To specify a cell width, click within a cell then click Property Panel>W. Enter 250 into the field. That has added a width attribute to the table cell tag. Add a width of 250 to a cell of other column. The table will be now be more robust. The table can be more robust still by adding invisible images (1 pixels transparent Gifs) to create a kind of brace for the cells, but we won’t need to do that for such a simple layout.

Now you’re becoming more familiar with HTML tags try adding the widths in the Code view window when editing the page.

In the top left cell we’re going to create a simple menu, type in Homepage then a Shift + Enter to add a line break (without creating a paragraph). Then repeat with About and Work. Select Home and link it to index.html via the Properties Panel>Link. Repeat for About (about.html) and Work (work.html).

In the right-hand column we’re going to place the content we’re created so far. Select the content, cut it and paste it into the right upper column of the table. Delete the unused white space above the table and preview the page.

You can see the menu is vertically centred with the right-hand content. This occurs because all cells vertically centre align content as a default. Simply click on Panel Properties>Vert>Top. Do the same for the cell with the main content in.

Tables become powerful when you start to nest them. Say we wanted to create two columns beneath the original link, insert a table of 250 pixels (or 100%) into the bottom right cell with two columns and one row. Save and preview the page.

With anything more than very simple layouts it’s a good idea to draw the out the table structures on paper before tackling it in Dreamweaver.

Now it’s your turn, so…

Create a 500 pixel wide 2 column, 2 row table
Add in pixel widths of 250 to the cells
Create a menu in top left cell with the links Home (index.html), About (about.html) and Work (work.html) in.
Paste in the main content in to the top right cell.
Vertically top align all cells with content in.
Nest a two column table in the bottom right cell

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: