Web Page Layout Using Tables Tutorial

[sukishan]

Web Page Layout Using Tables Tutorial

Using invisible tables to control the layout of your web page can be useful in many ways.

If you just simply place text on your web page it may look good in your web browser but if you change the size of your browser window the text will re-flow to fill your browser window. This may completely destroy your beautifully laid out web page.

One way to give you more control over the layout and make your web page design more interesting is to use tables.

Tables can be used to control many aspects of the web page. They can be used to place text into columns, images next to text, navigation buttons in rows or columns, and many more things.

Tables can also be used to control how your page looks in different sized browser windows. If you wish parts of your page to stretch and fill out the whole page no matter what size browser window the user is using you can set the table width attribute to fill a percentage of the browser window.

Alternatively, you may wish parts or all of your web page to remain the same size and layout no matter what size browser window the user is using. Setting the width attribute of the table by a fixed pixel width can do this.

The design of this page uses tables to control the layout. If you resize your browser window try to workout which parts of the page are using tables of a fixed pixel width and which are resizing to fill the whole screen.