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]

rows and columns

You will almost certainly not want a grid of separate small cells for your page. You need to join some together to create larger blocks here and there. To join, or merge, cells, select them and right click. Use Table>Merge Cells. You can also split cells but be careful - Dreamweaver will try to match the divided cells to surrounding rows and columns which may not be what you want.

A better way to split a cell may be to insert another table in it, with the required number of rows or columns. In this case, you should set the table width to be 100% as you want the new cells to fill the area.

It is a good idea to set the heights and widths of some cells before adding content. Good preparation at the draft stage will help but if you boldly went ahead then you'll have to do some now.

Set some column widths. If you have just two columns and want them the same then click in the column, any cell, and put 50% in the W (width) box. For three even columns you'd want 33% in two columns.

For pixel dimensions you will need to take into account cell spacing. So, in a 760px wide table with 10px cell spacing the columns would not be 380px. There is a 10pix gap between them so they'd be 375px wide. (375+5+375+760)

If you have a table inside a table then both padding and spacing need to be considered in calculations. You may prefer just to let Dreamweaver take a few guesses for you in those cases, at least, to start with. Often you'll find that setting a few important widths and heights will be sufficient and it is not necessary to do so for every cell.

Should you try to set impossible widths so that the total exceeds the main table width they will usually be rejected and not saved in Dreamweaver. Beware of heights, though, as with a % height, a pixel setting may override that.

Don't drag border lines in Dreamweaver!!

It's so tempting. You want to stretch out a cell and just drag the border like you would in Word. Don't do it. That sets a pixel measurement in Dreamweaver and gets fixed. I've seen many very very long web pages which absolutely no content that requires so much scrolling to get to the bottom - all due to someone (often accidentally) dragging a lower cell border and finishng up with a setting of several thousand pixels they didn't want.

If I had my way I would disable the feature.