Why we wont use tables for layout
As you might have noticed none of the cmsms templates use tables for layout and there is a good reason (well multiple reasons).
Tables as layout tool
You've seen it everywhere, tables within tables within tables (and then some more). In the old days tables were the only way to create layout for a page and it was quite ok at that time. One would have <table> tags for basic layout, menu and for content. Browsers rendered them one by one and layout was formed, the problem is that everytime table had a table inside it browser rendering engine would have to render the table inside before it was able to show the parent. Tables within tables were slow.
Nowadays when content and layout is good to be seperated tables have become obsolete for layout and we have better tools for layout. Take for example basic menu on the left and content on the right. On table layout we would have something like:
<tr>
<td> menu </td>
<td> content </td>
</tr>
</table>
And browser would render it, now what if you want the menu on the right side? You'll have to make changes to your layout. What if you want to look at your page from lynx? It will look funny. What if you want to use your pages through mobile devices where the screen size is limited? You'll need to scroll. What if blind people access your pages how will they be able to navigate?
These problems have one common nominator, content and layout are tied together!
Lets divify
We want to have simple structure for the document where we clearly mark menu, content and header. Screenreaders should first read the header then content and then menu. Lynx should have content first. Mobile devices will show the page narrower and as a bonus google likes this style
Header here </div>
<div id="content">
Content here
</div>
<div id="menu">
menu here
</div>
Now that doesnt look like nothing at the moment, but It has the structure of the page all figured out. All we need is to apply some styling so that menu is on the left and content on the right
border:1px solid black;
›
#menu ‹
border:1px solid black;
margin-right:80%;
›
#content ‹
width:80%;
float:right;
border:1px solid black;
›
This is the result
Content here
Content here
Content here
Content here
Maybe we should have the menu on right? lets try, change float:right to float:left and margin-right:80% to margin-left:80%;
Content here
Content here
Content here
Content here
Notice that we didnt change the html, it still has content before menu as we wanted but now we have the menu on right side
More divs
If you have used tables for layout before, this will be hard at first (it was for me). When you get the hang of it, things start to flow and you dont have to think about layout when you design the actual structure of the document. You can do almost everything from css!
Stay tuned for more examples...
