CSS Should Not Be Used For Layout

spork

Brewmaster

Posts: 6257

Loc: Seattle, WA

3+ Months Ago

Quote:

CSS is really cool. It is useful for a lot of things. The basic idea of separating content from presentation is sound. But when it comes to layout, the design of CSS is fundamentally flawed. Use tables instead.

http://www.flownet.com/ron/css-rant.html

An interesting rant, at the very least. Thoughts?

digitalMedia

a.k.a. dM

Posts: 5146

Loc: SC-USA

3+ Months Ago

I love when people run opposite to 'common' belief/knowledge/understandings. So much more enjoyable than people who just spew dogma.

In some ways I agree with their point(s). Basic layout is done on a grid, therefore, tables are very straight forward and predictable when converting a layout to markup.

However, long term, I think the technology and its root concepts are still developing and doesn't require an all or nothing decision at this time.

neksus

Mastermind

Posts: 2193

Loc: Canada

3+ Months Ago

Anybody look at his source?Mr. use-tables-for-layouts used CSS and top-down elements

Merlyn

Guru

Posts: 1143

Loc: Oregon

3+ Months Ago

LOL he did.

digitalMedia

a.k.a. dM

Posts: 5146

Loc: SC-USA

3+ Months Ago

Wouldn't it be great if we had some sort of GRID object for primary containers? Something like a table, but without the tedious overhead.

Just an errant thought.

spork

Brewmaster

Posts: 6257

Loc: Seattle, WA

3+ Months Ago

Where's UNFLUX's "nodding" smiley when you need it?

graphixboy

Control + Z

Posts: 1826

Loc: In the Great White North

3+ Months Ago

digitalMedia wrote:

Wouldn't it be great if we had some sort of GRID object for primary containers? Something like a table, but without the tedious overhead.

css3 to the rescue http://www.w3.org/TR/css3-layout/ Now if only browsers would support it...

joebert

Fart Bubbles

Posts: 13506

Loc: Florida

3+ Months Ago

What if we just used a single <table> inside the <body> element to give us our columns, then used table-less stuff for everything else ?

Technically it wouldn't be a misuse of a <table> since you actually are dealing with a row of columns, which is what a <table> is designed to be used for.

It seems like the main layouts columns are peoples biggest gripe when this argument comes up. If we use both, everyone should be happy, no ?

Bogey

Genius

Posts: 8417

Loc: USA

3+ Months Ago

joebert wrote:

What if we just used a single <table> inside the <body> element to give us our columns, then used table-less stuff for everything else ?

Technically it wouldn't be a misuse of a <table> since you actually are dealing with a row of columns, which is what a <table> is designed to be used for.

It seems like the main layouts columns are peoples biggest gripe when this argument comes up. If we use both, everyone should be happy, no ?

But that's compromising... that is not a complete victory

joebert

Fart Bubbles

Posts: 13506

Loc: Florida

3+ Months Ago

So is Neapolitan ice cream, but that works.

digitalMedia

a.k.a. dM

Posts: 5146

Loc: SC-USA

3+ Months Ago

Compromise is bad? Complete victory? Sounds like tyranny.

digitalMedia

a.k.a. dM

Posts: 5146

Loc: SC-USA

3+ Months Ago

graphixboy wrote:

Now if only browsers would support it...

<you are wise>exactly</you are wise>

locust

Beginner

Posts: 44

Loc: Austin, TX

3+ Months Ago

Good points. I fell out of the loop of web design for awhile. I was working as a web developer full time back in the last 90's when tables were just how things were done.

I have since gotten back into it. Now when I look at source code, most of the time designers are using divs. It was weird at first, but now I'm getting used to it. What I like about divs is that you can easily see the layout structure. Tables can be a real pain in the rear when you're trying to figure out what goes where...

So, I like divs now. Still, they are a pain sometimes too, like the guy in the article pointed out.

Bogey

Genius

Posts: 8417

Loc: USA

3+ Months Ago

Actually, to speak about the article... I see a lot of things I seem to agree with, and yet, with the current programming technology, disagree with. I must say that I agree with his point of view. Seeing how CSS means Cascading Style Sheet, I would say that it was created for the style... the web-candies and web conformity, rather than layout, but seeing how you can do the same with DIVs and XHTML (Extended HTML), I would rather use CSS and DIVs (DIVs is HTML as well... just like TABLES... just that it doesn't use so much code to create a simple box).

Let me explain my stand point here as it may seem unclear at first. I agree with most of what the article at random ranting says, but I believe that stands true in the point of HTML. I always assumed that XHTML was DIVs and strictly CSS and that HTML was tables with CSS working together... The reason being, was because with DIVs, if you want a different layout, all you have to do is change the CSS, making the layout dynamic... like forum posts and forums, which are directly related (in a sense).

To change the text in a forum thread, all you have to do is alter the Database table and it would change the text here... even configurations... enable the Email blocking, and people won't be seeing your email address and thus, won't be able to send you email messages.

With CSS, you change the CSS and you don't have to alter the DIV's and the HTML part of it... and you can completely change it all... this was shown evident in the CSS Competition here on OZZU itself.

Although that may be possible with TABLES, it might be possible to a degree and limited as well. But don't hold me on this, I have never tested TABLES... I just used DIVs for this. I used to use TABLES before I learned CSS, but I never used CSS alongside with tables (That was a bad experience).

I'm done with my rant here... I shall continue when more things come to mind.

Zwirko

Guru

Posts: 1416

Loc: 55° N, 3° W

3+ Months Ago

Sounds like a case of flat-earth syndrome to me.

MidGe48

Novice

Posts: 27

3+ Months Ago

Zwirko wrote:

Sounds like a case of flat-earth syndrome to me.

Yes, indeed. It is a case of arrested development rooted in the paper era where the piece of paper did not change its size and the information volume contained therein was static. Of course, restricting oneself so, would be a total under utilisation of what is available nowadays, Trying to deal with these issues using a grid would be near impossible and if at all possible would require an amount of programming so large that it would never get done, or could never be changed fast enough in response to small changes in requirements.

This arrested development is the primary reason that we still find fixed layouts in use. Fixed layouts are in my opinion an expression of either the incompetence, or the arrogance, of the designer in 99.9% of the case where they are used.

Enjoy

Bogey

Genius

Posts: 8417

Loc: USA

3+ Months Ago

Zwirko wrote:

Sounds like a case of flat-earth syndrome to me.

Do you want to define that phrase? I don't quiet get it

Zwirko

Guru

Posts: 1416

Loc: 55° N, 3° W

3+ Months Ago

I'm sure you've heard that there are reputed to be people who still believe the Earth to be flat rather than roughly spherical? By analogy, anyone who clings to old ways of thinking that have been demonstrated to be false, can be accused of thinking like a believer in a flat Earth.

Web pages aren't grids, they aren't tabular and they are read by more than just fully-sighted humans on a monitor. Those are examples of outdated modes of thinkng - or, flat earth syndome. In true flat-earther style he then uses some rather odd examples (more related to his own confusion, than to anything factual) to backup his line of reasoning.

Basically, I'm saying he's made a flawed argument to claim that css is flawed and that tables are better; not realising that tables died for good reasons that mosts folks agree on.

Bogey

Genius

Posts: 8417

Loc: USA

3+ Months Ago

Oh... never heard of such analogy here... but it makes sense...

digitalMedia

a.k.a. dM

Posts: 5146

Loc: SC-USA

3+ Months Ago

Zwirko wrote:

Web pages aren't grids, they aren't tabular and they are read by more than just fully-sighted humans on a monitor.

That's funny, I was thinking how your argument was flawed because CSS and TABLES aren't in opposition to each other. What makes it even funnier is viewing sokker.org on my cell phone (Samsung BlackJack II). By the way, visual design is in fact based on grids. That's why we have margins that bodies of text align to and spaces between titles and paragraphs and such. If you review the link that graphixboy posted, you'll see that W3C isn't ready to dismiss grid based visual organization for the structuring and delivery of information, either.

Tables haven't "died". They're just not used as container objects.

Reconsidering and re-examining ideas is never wrong. It tends to be smarter than blind dogma...always.

//Who are these so-called "reputed" people who believe the earth is flat?

Zwirko

Guru

Posts: 1416

Loc: 55° N, 3° W

3+ Months Ago

Sokker.org is not my site - it's just an online game that I play. I sometimes log in via my own phone and it's not a pleasant experience (although it's a lot better now than it used to be).

Two points:

1) Many of the things the guy uses to support his arguments are simply wrong. Why must the code flow in the same order as it does on the screen? Why must the left column (possibly a menu) appear before the content? Why, if using css in a three-column affair, must you have the right column appear before the content in the markup? None of these things are true and don't support his argument.

2) Tables are purely presentation. Since the article attempts to claim that css-only designs do not really separate content from layout then you have to wonder what he thinks tables are doing. Tables are the ultimate hack - using something that has a particular use and semantic meaning for another purpose entirely, one that is purely presentational in nature.

This is why his argument is flawed. You and he may think tables are good for layout, but you shouldn't use the arguments that he presents (1 & 2) as they don't support the claim.

Yes, containers is hitting the nail on the head. Boxes. Since boxes and containers share a geometrical similarity with tables leads to a lot of confusion. css-only layout lends itself far more naturally to a container-based layout than do tables. Tables and css aren't in opposition is something that I would agree with. They are different beasts that have different functions is my view.

I'm not a table-basher. I even have one on my own site. Devils-advocate and all that...

digitalMedia

a.k.a. dM

Posts: 5146

Loc: SC-USA

3+ Months Ago

Fair enough.

netrider7880

Student

Posts: 72

3+ Months Ago

Great link and i learned something new to me.Thanks.

paul8368

Novice

Posts: 27

Loc: UK

3+ Months Ago

Personally I like css for formatting and find the best way to get the layout you want is to understand how the html works. The worst thing I find is overcomplex css with a huge list of settings in the index file why doesn't everyone separate it out and cross refer? Is there a benefit to keeping it in the primary index file?

Paul

graphixboy

Control + Z

Posts: 1826

Loc: In the Great White North

3+ Months Ago

paul8368 wrote:

why doesn't everyone separate it out and cross refer? Is there a benefit to keeping it in the primary index file?

I think the biggest issue here is lack of understanding about how css actually works. With everything included in the head of the document people don't have to worry about understanding inheritance since the code is per page it won't override other things...

tastysite

Proficient

Posts: 349

Loc: Brighouse, West Yorkshire, England

3+ Months Ago

I must say I separate the css from the code because of not better reason that that was the way I learnt same goes for divs v tables I am so new to web design I never ever used tables! In fact I wanted to put a table on my website and so I started looking at tables and I must say that the code is not that user-friendly I mean with divs you can SEE the placement of the code effecting the div's placement on the page (assuming you use position:relative) but not so with tables mabe that why they have fallen out of favour?

Nightslyr

Proficient

Posts: 284

3+ Months Ago

I think the part I laughed the most at was his attempts to knock down his straw CSS layout. I mean, yeah, having one long, uninterrupted string of characters will break the layout. But how is that any worse than a table's cell automatically stretching to fill content, thereby squishing the rest of the cells in the process? It's the same problem - the content is larger than the containing element, so something happens to get it all to fit - displayed differently (in CSS the content bleeds through to the neighboring elements, with tables the current cell swells to show it all at the expense of the surrounding cells).

CSS does not magically erase the fact that designers still need to know the size of their container elements and how to best fit content within them.

The only problem I have with CSS is the lack of ability to create a liquid vertical layout as well as horizontal layout. It'd be nice to specify that a column's height should be the height of it's containing element - border + padding. I haven't followed CSS 2 or 3, so maybe they have a solution.

san_sa_rocky

Beginner

Posts: 48

Loc: Dhaka, Bangladesh

3+ Months Ago

Lets forget CSS on web, play CSS on web. ahhahha ha!!

Creadion

Born

Posts: 3

3+ Months Ago

He's got some points with that indeed.

But one thing I don't understand, he says that you to do leftnav-rightnav-content, but what's the problem about leftnav-content-rightnav then?

http://www.creadion.nl/tablesinsteadcss/

Sorry if someone already said something about this, didn't read the whole topic.

Breeze

Photographer

Posts: 1029

Loc: Australia

3+ Months Ago

Tables are tedious for me, I grew up in the CSS age. I might use one table or two but CSS for most things.

I had to laugh when I looked up the source for this page: http://shouldiusetablesforlayout.com/