homepage Welcome to WebmasterWorld Guest from 54.243.17.133
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Which CSS bandwagon?
Use a table based layout or CSS?
Red_Eye




msg:1191384
 12:39 pm on Feb 19, 2003 (gmt 0)

Hi,

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?

 

Hagstrom




msg:1191385
 12:56 pm on Feb 19, 2003 (gmt 0)

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:

  1. A center-aligned column with left-aligned text
  2. Caption for an image

BlobFisk




msg:1191386
 2:10 pm on Feb 19, 2003 (gmt 0)

Red_Eye,

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.

BlobFisk




msg:1191387
 2:16 pm on Feb 19, 2003 (gmt 0)

Hagstrom,

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.

Hagstrom




msg:1191388
 2:55 pm on Feb 19, 2003 (gmt 0)

> 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.

Red_Eye




msg:1191389
 3:31 pm on Feb 19, 2003 (gmt 0)

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.

Nick_W




msg:1191390
 3:48 pm on Feb 19, 2003 (gmt 0)

Try:

[w3.org...]

Nick

BlobFisk




msg:1191391
 3:50 pm on Feb 19, 2003 (gmt 0)

To add to Nick's link, have a look at Glish.com and Bluerobot.com also.

Hagstrom




msg:1191392
 11:43 am on Feb 20, 2003 (gmt 0)

> 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"?

Nick_W




msg:1191393
 11:47 am on Feb 20, 2003 (gmt 0)

Theres a good 3 coloumn layout for nn4 here that might interest you:
[webmasterworld.com...]

Nick

Red_Eye




msg:1191394
 12:29 pm on Feb 20, 2003 (gmt 0)

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.

SethCall




msg:1191395
 3:26 pm on Feb 20, 2003 (gmt 0)

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]

holly




msg:1191396
 7:15 pm on Feb 20, 2003 (gmt 0)

another option

Real World Style - css layouts, tips, tricks, and techniques
[realworldstyle.com...]

There is some emphasis for NN 4 browsers and using CSS at this web site.

holly

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved