I receive an email this morning from a client I gave a Dreamweaver training session to a few days ago. Here it is:
A quick question for you…I’m wondering about the differences between using tables, layers, and floating divs (is that what you call what we used yesterday with CSS?) When would someone want to use one vs. the others?
Layers seem to be the easiest way to create your layout the way you want it, but I’m wondering what the drawbacks are to that? Also wondering how you might combine two or more methods to create your layout?
Thanks again Alex!
It was great to work with you…
Here is in a nutshell my response:
Tables are more appropriate to present a grid-layout data just as you would display data in an Excel spreadsheet with rows and columns. As you will notice in the index.html file inside the portfolio folder, we use a table to display the content of that page because the information is presented as a grid.
However using tables for the website layout is cumbersome. Tables take more time to display compared to DIV elements because all the rows and columns are tied together. The web browser has to make an extra effort to have all the cells in the right places taking into account all the “rowspan” and “colspan” that might be defined in the HTML markup.
You also have less control over the table layout unless you use invisible spacer images to force cells and rows to match the dimensions you specified. That can make your HTML markup as bloated as it can be.
On the other hand with CSS, you can separate the data (page content) from the presentation (layout). Using an external css file (i.e. layout.css) you can have a uniform look-and-feel throughout the entire site. But more importantly wen you decide to change a give style, you do it once in the CSS file and all pages sharing that style sheet will take effect of that changes: real time saver.
CSS makes your pages markup cleaner. The web page is just an aggregate of individual blocks you can position with pixel precision anywhere you want. You can move one block anywhere you want without pretty much affecting other blocks.
To use a simple metaphor, if designing a website with tables is like building a typical car, with CSS you bring in the capabilities of the “Transformers”. How cool is that!!
That means, your website look-and-and-feel can be quickly changed in terms of fonts, colors, layout,.. from your external CSS file.
Now when we talk about layers or div tags they all mean pretty much the same thing as far as the layout is concerned.
The tag “<layer>……. </layer>” was introduced by Netscape when CSS was in its embryonic stage. That tag is no longer used today in XHTML.
Using div tags as containing boxes, you can stack them on top of each other using the z-Index (value defining the stacking order) and absolute positioning (you can find it in the positioning category when you open the Dreamweaver’s CSS editor).
You can hide or show a box (layer, div tag, container) either by changing its visibility from visible to hidden or set its display property to “inline” , “block” or “none”.
Floating Div tags comes in handy when the need arises to align rectangular blocks of content side by side horizontally without having to use absolute positioning. A div tag creates is typically a block-level container. As such has natural tendency to occupy a 100% width of its parent container and push down any another other element placed after it in the HTML markup. Therefore by specifying the width of div tags and floating them you can place them side by side as long as the width of their common parent container can allow.
The only drawback of using CSS is that you have to do the math as we did yesterday to get the right positioning or calculate the dimensions of each box to align them side by side.
So always design you website layout using div tags (i.e. #wrapper, #header, #maincontent, #footer, ….) as the main building blocks of your web page layout. You can then use more div tags to create smaller containers for your content and position each section of your web page.
When the data you are presenting is a grid then use tables to get the job done more efficiently. Table and CSS are not mutually exclusive. You can use a table then format its look-and-feel with CSS. Again it keeps your HTML and content semantic clean & tidy, easy to maintain and Search Engines Friendly.
I hope this message answers your questions.