Dreamweaver Tutorial

Just as soon as you get your content in the place it should even itself out. You can also size cells manually.

So if I know that I want this left cell to be 300 pixels say instead of 385 then I can use the properties inspector and just change that number to 300 or I can click and drag. One other thing to be careful of if you make a left cell 300, look and see if there is a size for the right cell.

I know the total size of this table is 800 so if I have a 300 pixel cell in the left then I either need to add a 500 pixel cell in the right so that the total is 800 or I need to have it set to nothing which tells the browser to automatically fill that in the rest of the space. But it’s very easy as we start splitting and merging cells and this is kind of an advanced tip. To create cells with fixed width that equals more or less than the total size of the table and when you do that you get very unpredictable results.

So notice I have been very careful that the left cell is 300, the right cell is set to nothing and these are equally spaced because they are also set no width no height. A couple of other things to watch for when you are creating complex tables like this notice that when I put my cursor on the left side I am aligned vertically to the top and horizontally to the left.

But over here remember in the previous design we wanted this aligned bottom so that the text will leave kind of a gap at the top kind of a design trick. But now I am going to want this aligned to the top so make sure that you change that. And this time I am going to select all of these cells and I can apply the vertical alignment to all of them once. The other thing I want to do to these cells on the right is to center them. So that when I put the images inside them they will all be centered.

So I can do that with horizontal center. Now when I place my photos into these cells they will all be nicely equally spaced apart. One other tip I could have created is nested tables here for this row of cells and that would have been perfectly correct in terms of HTML. But you see this row it is slightly more efficient to split and merge cells in one table than to have two tables within tables as nested tables.

Browsers will load the pages a little faster the code will be a little cleaner. So whenever you cam you are better of splitting and merging cells within an existing table than using that trick of just inserting a completely new table into a cell.

In case you didn’t see the video in part 1 of this series… here it is again.

Tags

Tricks