Table Layout Techniques
Coping with different resolutions

     Webdevonline Extra  |    Dreamweaver Index   |  Site Index

Table Alignment

  • Set alignment in standard view
  • Centre align the main layout table. If you you don't get it to expand when resolution changes it looks better centre screen
  • For nested tables centre align the underlying table so it will it will look good in different resolutions


Viewing at different resolutions

If you create a page to fill the screen at 800*600 resolution it will be smaller than the screen at when you change to 1024*768 or higher resaolutions.
You need to think how to make the page look good at different resolutions.

Design options

(1) Don't use tables or any layout technique- this will severely limit your creativity

(2) Create tables to fit at 800*600 (760 pixels). Then centre the main table. If the background of the table and the page are the same then any content appears to merge into the screen better.

(2) Create % width main table in 800*600. You can set this to 100%. The screen will expand to fit at 1024. The other tables nesting on top will expand to fit at higher resolution. The problem comes with written content which looks small within its cell at higher resolution. See Nested tables

(3) Use 'autostretch' on the main content table . This will stretch one cell to fit at higher resolutions. The other table cells will stay the same width. Set the autostretch cell when you have finished all the other work. See this page and Tablestretch

(4) Use CSS This layout need not use tables at all. The difficulty of catering for all resolutiond depends on the complexity of the design
Simpler designs achieve this with style See CSS Styles
More complex designs may need some tricks to cope with all browsers and resolutions See CSS Design 3 column layout

This main table has an autostretch column. This means that when you display the page in high resolution the display will fill the whole screen. Save and open this page in an editor . Highlight the main content table and you will see a green wavy line above the autostretch column and a double line above the column with the spacer.The nested table has one column 100%. Save and view the page in Dreamweaver