|Which CSS bandwagon?|
Use a table based layout or CSS?
This may seem like a silly question. I have been browsing the forum, I came across this statement used when referring to a new site design 'Glad they haven't jumped on the CSS band wagon and stuck to table layout'.
I use table layout with CSS, however this statement would imply that there is a difference between CSS and table layout methods. I used to use layers or div tags, but changed to tables when I started to learn about CSS. I am getting the feeling that I did this the wrong way round. That it would be better to use CSS with div tags.
What are the differences? are there any? and what are the pro and cons of each method?
Personally I'm climbing on the wagon since tables IMHO are much more robust (particularly with NS4).
2 things that I myself can't do very well with CSS are:
- A center-aligned column with left-aligned text
- Caption for an image
Generally when people speak about table based layouts or CSS based layouts, they are referring to which they use to achieve the structure of their page. Many people use tables to create their page structure, and use CSS for all typographical and colour styling etc.
CSS layout generally refers to a page structure based on CSS-P (aka CSS-2), or one using div's.
Briefly, the pro's of using a CSS based layout is:
- Standards compliance
- Allows you to place the content at the start of the body - thus helping with spider friendliness, SEO etc.
- Content is rendered per div - as opposed to with tables where the content is rendered only when the entire table is ready.
- Easier to switch the position of elements by making changes to the CSS
There are more, but hopefully you get the drift, and I'm sure other people will post more.
Table based layouts are much easier to do (for the most part) and you know that it will look similar in all browsers, without having to worry about compliance. However, it's important to rememeber that strictly tables should only be used for tabular data.
Check out this page [bluerobot.com] for a nice way of centering a div.
To align the text to the left within this, just add text-align: left into the CSS.
It's true that there are problems with getting many CSS layouts compatible with NS4.x, but it's not impossible. I for one just make sure that my CSS degrades gracefully for NN4.x, I don't support it any more, unless the client specifically asks for it or a large chunk of their users browse with it. Looking at log files, it's quietly dying away.
> Check out this page for a nice way of centering a div.
Wicked :) But remember that "A negative value is allowed, but there may be implementation-specific limits."
> To align the text to the left within this, just add text-align: left into the CSS.
Yes, I took the liberty of posting in another thread [webmasterworld.com].
> It's true that there are problems with getting many CSS layouts compatible with NS4.x, but it's not impossible. I for one just make sure that my CSS degrades gracefully for NN4.x, I don't support it any more, unless the client specifically asks for it or a large chunk of their users browse with it. Looking at log files, it's quietly dying away.
I can hardly wait. Some of my images are jumping around when I reload on NS4. That is: when I press the reload button - without altering my HTML - a centered image suddenly floats to the right and a right-aligned image jumps to the left side! And the next time I reload they jump back.
Thanks for your replies, I am starting to get the picture. Currently I am using tables for the page layout and CSS for the formatting (as BlobFisk suggested). However I do find that getting the layout just right with a table layout can be quite time consuming and frustrating.
I see the benefit of div tags (one of the reason I stopped using them was the NS4 issue however as Hagstrom said it seems to be dying slowly), however it is not immediately apparent to me as to how CSS enhances them.
Could someone give an example of a div layout with CSS formatting.
To add to Nick's link, have a look at Glish.com and Bluerobot.com also.
> have a look at Glish.com
Beautiful - but they are using position-right, which is unsupported on version 4 browsers.
And to make it work with IE5 they are using a hack.
On their main page they say "To Hell with Bad Browsers" and while I don't necessarily disagree, I would like to point out that the old "chunky" tables actually support NS4.
So to answer Red_Eye's original question: Do you want "beautiful" or "solid"?
Theres a good 3 coloumn layout for nn4 here that might interest you:
|Do you want "beautiful" or "solid"? |
I want both, I know that sounds unreasonable. I think that I need to experiment a little to see which style of web page layout suites me best.
By the way, that site that BlobFisk mentioned also has another method to center divs, which I do prefer, mainly cuz it doesn't seem as nasty, which is here [bluerobot.com]
Real World Style - css layouts, tips, tricks, and techniques
There is some emphasis for NN 4 browsers and using CSS at this web site.