WHICH ONE IS BETTER FOR SITE LAYOUT: "DIV" or "TABLE"

June 20, 2009 07:45

Sometimes developers use HTML tables to control the positioning of items to create a layout in webpage. This is a very common practice but not the best one. Also W3C discourages it by saying that <table> should be used to mark up tabular data such as sign up pages with many fields but not to create page layout. To create a layout <div> tags with "css" features should be used. These are why:

1. By using <div> and a separate stylesheet then we don't need to repeat this definition. This leads a site that is both faster to develop and easier to maintain.

2. Seperate .css files are cached by the browser but not html tables. So when we use <div> with .css files we get much faster loaded web sites. This is much more important in heavily loaded websites because sending less few bytes with thousands of users means much more efficient bandwidth usage.

3. By using <div> and separate stylesheet we can define multiple different themes and style sheets that users can select by considering preferences. These preferences can be colors, pictures and layout of <div> tags. (at top, at right etc.) Especially when changing position of some columns using <table> (i.e. exchanging positions of left and right column) is much more difficult than manipulating <div> tags.

4. For different screen resolutions, especially for PDA's to adapt the output for them is very easy by defining different stylesheets. Also hiding some content (i.e. some banner) by <div> is much easier than <table>

Tags: html
Categories: WEB DESIGN
Actions: E-mail | Permalink | comment

Comments (1) | RSS comment feed

Comment RSS

WEB PAGE DESIGN WITH EXPRESSION DESIGN 2

May 2, 2009 00:31

Expression Studio has many great tools to design web pages, html,silverlight or just shapes,pictures etc.AlsoExpression Design, one of the family member, has a very important feature that can ease our web desing in its first stages.We can design our page with its html not just its pictures.So let' s start:

1.First create a new document.

Here size of the document is important because it is related with our web page's resolution we want
2.Draw the header part.

To draw this rectangle use rectangle tool in toolbox.
With this rectangle tool draw other parts: left navigation bar, footer and menu:

After that now with slice tool draw slices for parts (footer, header etc.)
Just make rectangles around page parts.After finishing ctrl+e for exporting:

Here adjust setting of slices.Give logical name them because these names will be corresponding <div> names in html and will affect our all design.In container options select Html & Images: