HTML Tables with Dreamweaver

Using tables can be an effective way to contol the 'common' look of your work when people visit your page having their screen resolution set the their personal preferences. Some people like large text and others like small text. The higher the screen resolution, the smaller sceen objects will appear. This is most noticable with text. A specific example with numbers might help.

Suppose someone visits your page and you have a centered table that is 600 pixels wide. Their screen resolution setting of 640 by 480 will cause your table to appear (to them) with a small border of 20 pixels on each side of the table, a small about of 'empty' space. Another person visits your site and has a screen resolution of 800 x 600 pixels. This same table will have 100 pixels of 'empty' space on either side. You may (or may not) be bothered that two different people will see the same page differently.

Tables give you a way to address this issue and have both people see the same table in almost the exact same way regardless of how they have set their monitor to display screen content. The solution has to do with how you set up your table to be viewed. There are two different ways to set up the viewing of a table. You can have a table with a fixed width (i.e. a fixed number of pixels) or as a percent of the screen width. If you choose a fixed width, each viewer will see your table as x-pixels wide. This could be 300 pixels, 500 pixels, or 453 pixels. You get to decide on the number. The 'penalty' if you can call it that is to have that table viewed differently by different viewers. The concern ranges from no problem to severe, depending on what you are trying to do on the web page. The HTML tag would look something like: <table width = "500">

The percent width will use the viewer's screen resolution to determine the number of pixels to display the table. For example, a 50% width will take up half of the width of the screen. On a 640 x 480 screen, the table would be 320 pixels wide. On a 800 x 600 screen, the same table would be 400 pixels wide. Both viewers would see "approximately" the same blank space outside the borders of the table. The HTML tag would look something like:

<table width = "75%">

The downside of a percent-width table is the shift of width. In order to accomodate the increase/decrease in pixel width based on the different screen widths for different screen resolutions, the spacing inside the table has to expand/contract. This could cause some tables to have columns with 50 pixels width to be changed to 75 pixel width. The shift of 15 pixels could alter the view of the table content as well! What's a body to do?

The best 'work-around' I have found for the different view issue is to use a table within a table. In order to make it work, I have two tables. First I make the outside table have a width of 100% and the inside table have a fixed width. The outside table is set with 1-row and 1-column-basically a 1-cell table.

This table should spread completely across the screen, regardless of what screen resolution you are using. I then insert a second table in this large cell and make it a fixed width, say 600 pixels. The inner table is centered. I give the outside table a cell background color which will look like a 'bland' color or texture using a background image.

Then I give the inner table a background color of white.

When someone visits my page, they may see a side border of more or less than someone else (the outer table will expand to the viewers screen resolution, but the inner table remains fixed). The real content of the page will be viewed pretty much the same for all of the others. Neat trick!

When you really need to control the placement of table content, you resort to a 'trick'. You can put an invisible 'place-holder' image inside a cell and let it take up as much space as you need. Then you place the 'real' object in the same cell and it will have to move over the place-holder image in order to make room. This has he effect of pushing the real object as many pixels as you need. In this case, you can control the exact location of an object within a table down to the pixel level!

Consider this example: The place-holder image is shown so you can see it working. Then the same process is shown using an invisible place-holder image. Note the control of the location of the viewable object in both cases.

Basic Image	Image with place-holder image (10-pixels wide)	Image with place-holder image (30-pixels wide)	Image with place-holder transparant image (30 pixels wide)

By controlling the width of the invisible image, you can move the visible image around within the cell. Here are some other examples of using an invisible image to achieve spacing control of text within a cell. (I have used a visible image so you can see where the invisible image might be located.) Imagine the visible place-holder image was invisible.

Text that is 'indented' a fixed amount of space from the left.	Text that is aligned at the top of the cell but is now displayed a few pixels below the top	In this case, the text seems to be indented for just the first couple of lines of the paragraph. Then the remainder of the text appears to pull back to the cell edge.	In this case, the text appears to wrap around the image as it sits in the corner of the table cell. This can be pretty neat to see when the invisible image is put in the place of the image that is now visible.
Width = 15 This starts the text 16 pixels from the left edge.	Height = 10 This starts the text 11 pixels from the top	W = 38 H = 76 You can control the number of lines of indenting by adjusting the height of the image.	W = 70 H = 82

It is possible to have a table with some of the cells colapsed into adjacent cells. Look at a couple of examples:

Perhaps your needs have more of an 'exotic' flavor.... You can colapse row cells or column cells just as easily.

The final example of the use of tables is to make the table content show without showing the actual table itself.
The process is achieved by giving the table tag a border = 0. This means that the table with have a border of 0-pixels or be invisible.
The two tables are identical except the top table has border = 0

	The image on the left seems to suggest a celebration of a victory!
(Image centered)	(Text shows up beside the image)

	The image on the left seems to suggest a celebration of a victory!
(Image centered)	(Text shows up beside the image)

Sometimes you may want to display the table cell 'walls' and other times you just
want to use the table structure to control the horizontal layout of the page content.

Now, how do you make Dreamweaver give you all of this control of a table and its contents? It is really fairly easy. First you have to have an understanding of what table feature you want to achieve. Hopefully, this overview of table possibilities has shown you some of the possibilities. Now ....

on with the the tutorial on tables with Dreamweaver.