why do tables jump around and become out of line when viewed in browser?

Hi Anna,

This is actually a feature which enables the information within table cells to adjust accordingly depending on the visitor's browser.

Not everyone has the same computer set up, especially when it comes to screen resolution. Some people may be using a mobile device with a very small screen. A graphic designer may be using an enormous monitor and have a huge resolution.

The good news is you are able to set the width of your table AND your cells with a combination of pixels and percentage if you so desire.

Personally, I find it best to not specify ANY width for any part of the table if I'm just showing a table of information. Most browsers do a very good job of displaying tables.

When it comes to design though, a table may need to be 100% in width, with the first cell locked at 100 pixels, leaving the second cell to stretch out over the remaining screen space on a user's screen. You can also use the 'nowrap' parameter to insist that a cell does not wrap text, unless you specify. This will even cause the browser to scroll sideways if the text pushes the cell far enough. This isn't such a good thing for the user, as it's natural to scroll down, but not to scroll sideways. As a result, NoWrap is usually only used on cells with a small amount of content.

A percentage width means the table will stretch or contract, even if the user resizes their browser window. It's best to test your page in all browsers on quite a few resolutions.

Good luck with your table designs, and remember to experiment with different widths. If you get really frustrated, remove all widths from all cells and the table itself, and start again. Remember, if you adjust tables or cells with the mouse in Dreamweaver, it automatically assigns them with width values, and you may not want it to.

Regards, Rich