CSS vs. Tables: What's the Benefit?

My personal unprofessional tips. Sites should be about 759px wide. and you can put them in a centered layer, to center the site in CSS

http://www.quirksmode.org/css/centering.html <- instructions

 

Two files attached. One works in FF but not IE because it implements a kind of auto-size box, which is what J.D. wanted though not actually necessary to creating the page. The second works in both IE and FF and looks identical to the page J.D. submitted.

 

The first one sets the display property to table, which is just another way to use masqueraded tables, although doing so is against W3C recommendation I quoted earlier. It is not portable too, since IE does not support div's displayed as tables. The second one has widths all over it and doesn't fit the requirement.

J.D.

 

No, it's not. (Once again you don't understand the fundamentals.) CSS has a specific property to achieve the *appearence* of a table. That is all style sheets are about; appearence. HTML has a specific element to achieve the semantic structure of a table. And that is all HTML is about; structure. Thus if you attempt to use CSS to define structure then you are misusing CSS, and if you are using HTML to define appearence then you are misusing HTML. The sole purpose of the table in your example is to create a box around your picture. That's appearence, and thus modelled by CSS.

I already said that; twice in fact. But thanks for repeating.

As I've already told you, you're so-called requirements are not actually required to create the page. You didn't just tell me to make the page with CSS, you tried to tell me *how* to make the page with CSS. That's like telling someone to make a border without using the border property. The bottom line is my page used HTML and CSS *correctly* and it still renders identical to your page.

 

First time it was cute, now it's just annoying. All you do is just quote other people and their designs, claiming at the same time to have the ultimate knowledge of HTML/CSS. Well, like I said before - stick around and show your knowledge by helping other people with an advice, not by trying to tell everybody that whatever everybody's doing is wrong, which pretty much summarizes most of your up-to-now advices and comments.

J.D.

 

JD and FeelLikeANut and all else,

I don't know why there is such a feud. We are in a adolescent stage in the life of the web and there are many ways to achieve and end. This thread sounds like a debate on religion.

Tables have always been a workaround for achieving specific layouts that is supported in most computer browsers. CSS is a method devised to allow for the separation of content and presentation. Part of the reason for there being any issue at all is that for a Microsoft hadn't changed the engine for IE in years and full, correct support for CSS has never been achieved (although they were the first to implement it)

Issues with CSS stem from the browser developers interpretation of CSS specifications and not the fact that there may be shortcoming in CSS (which I'll admit there are.) The tables camp may have decided that the frustration of these shortcomings outweighs their use (and in some cases may be justified.) The CSS camp may have persevered and realized what can and cannot be achieved and pressed on into a new way of working.

I personally design most of my websites using CSS and HTML without tables but, as I mentioned in another post, there is a time and place to continue to use tables for presentation. If a client or site has a large visitorship who use legacy browsers or are maybe in a developing country where hardware cannot support newer browsers effectively then why not use tables. It will allow for at least competent, understandable, presentation without too much difficulty.

CSS is a developing specification. W3C didn't stop with CSS 1. CSS3 is coming and eventually the browsers will get closer to one another . I personally think that there will be huge advances down the road for the separation of content and presentation.

I won't tell you to go look at CSSZenGarden as I find it too easy and if you read the submission guidelines, this site is about graphic design not markup.

Developing for the web is not about markup or presentation it is about communication. For the end user, if the result is the same --fine. But if the end user cannot receive a logical presentation in their browser or user agent then we have failed.

BTW have we at all discussed the implications to the client of building entire flat sites out of tabled layouts? What happens when they hire an in-house developer? Is is understandable? Same with CSS are the classes and id's used logical and semantic.

I don't care what you use just think about what you are using and why.

Keep this thread positive.

All the best,

Jay

 

I fully agree.


There's been some great commentary in this thread....it's a great read, so hopefully it won't fall apart into a bashfest.

While I've done design work I'm no code pro. What I wouldn't give to have a team on hand to get things done right every time!!! For me 'right' equals getting the content to the user with the message intact within a design that maintains both image and efficient functionality. That means finding a balance between user navigation and content edited for value (what the readers are looking for) and marketing (achieving business goals).

The design style, the presentation, and the structure are all tools to make this happen....while still keeping in mind, "Who's visiting this site, and what are they using to view it?"


It all boils down to what Smashing Jay stated...

 

Good thought, thanks. How about problems in the vertical dimension?
(BTW, sorry to drop your URL, but the website forced it on me).

 

Well how else am I supposed to intertret it? You tell me I am still abusing HTML tables, despite the fact there are no HTML tables on the page I submitted. Which brought me full circle to thinking that either you truly don't understand what is going on, or you simply don't care.

 

Wow, I actually got something out of this argument. I have been leaning on classes way too much!

Let's all keep in mind that seperating structure and presentation is transitional. Not everybody has made the transition yet.

Eric Meyers' Cascading Style Sheets: The Definitive Guide covers CSS very well. I only have the first edition. You will want to pick up the second edition, it covers positioning and CSS2 more thoroughly.

 

Jay, the main point I was trying to convey is that the "tables camp" or "CSS camp" is an artificial separation of technologies. Artificial simply because CSS actually complements HTML in general and tables in particular. Trust me, tables are not going anywhere and will be in every HTML and CSS standard that will ever be released.

The choice of using tables or div's for layout is just a matter of personal preference - all these arguments about table-less designs being preferred by SE's and making pages smaller are nothing but a myth. A *properly-designed* table styled with CSS and combined with div's, where appropriate, is not going to affect website's performance or reduce SE ranking in any way.

J.D.

 

You're trying to argue a point that was never made here. No one ever said tables would not be part of the specification. What is being said is that tables should not be abused for aesthetic purposes, which the specification has explicitly discouraged for nearly a decade.

What about the other, still greater benefits of proper HTML pages with CSS layouts that you failed to address? That being that the page will be accessable to all devices (mobiles, palm pilots, etc.), all people (regardless of any disablities), and virtually all browsers. The other great benefit being highly adaptable layouts. When dealing with a site of thousands of pages especially this is very large benefit that will save a lot of time and money in the long term.

Edit: making page's smaller is certainly not a myth, btw. Tables often horribly bloat the code. And that effect is amplified when that bloated code has to be duplicated on every single page of a site.

 

That's another myth. XHTML Basic is the standard that is commonly used in mobile devices you mention and it includes tables. You are just going to have to accept it - tables aren't going anywhere.

I hope you realize by now that I'm talking about properly-styles tables. If not, then you are missing the point. If you do, I don't see then how exactly it will save you time and money to completely avoid using tables for thousands of pages.

J.D.

 

Lets all look at the W3C spec for tables in HTML4.01 of December 1999.

W3C goes on to say to discuss further the reasons and proper use for (their words) *correct use* of tables.

If you also refer to the W3C's articles on Web Style Sheets (that emcompasses CSS, and XSL etc.) it states,

My opinion is that the spirit of the W3C and others would advocate for an eventual change from having any presentational markup in HTML, as HTML was to be a port of SGML and was devised to communicate logical information. It seem as though the W3C acknowledges that the use of tables as for layout has actually helped the internet as it helped spawn many people to use both WYSIWYG editors and word processors to undertake to build websites. As the web has matured, they know advocate the abandonment of tables for layout. (I didn't say it, they did, see above.)

I strongly agree with JD in that if there is a specific cross-browser compatibility issue that affects the end user experience, one would be remiss in not using tables in combination with CSS and HTML. However, the odd one in a million example given earlier in this thread is not compelling as it is for the sake of challenge and not within the context of a client or user issue (other than the fact that you may have used this layout scheme in a previous project)

 

Holy. Mad. Crap.
You either can't read or can't learn. I'm going to quote myself from my post just before this one since you obviously completely missed it.

Yes, I do. I didn't just say that using CSS is enough, I also said it requires proper HTML. A misused table, no matter how you style it, is still a misused table. (smashingjay posted more information above that explicitly describes what is proper and correct HTML.)

There's a lot you don't see. Would you think that editing thousands of files would take the same amount of time as it would to edit one file?

 

It was a real-life example, actually. I had a client who didn't want server-side code and had a lot of pictures to publish. It was impossible for the client to add width/height for every picture or div simply because of the maintenance issues. This solution was ideal because they simply could copy and paste a couple of lines of text or use automated tools, like sed, to publish a bunch of new pictures.

To give you another example, imagine you have a four blocks organized as 2x2 and you don't know how much text is going to be in each one of them. Adjacent horizontal div's are not connected in the way table cells are and will grow at their own pace. The only way to tackle this is to use an outer container div and set internal div's height to 100%, which is not always possible (e.g. height may be viewport-dependent and will result in contents clipped).

J.D.

 

FEEL, this is my last reply to you. Arguing with you is like arguing with Wilson from Cast-Away.

I will use short sentences. May be this will help. Thousands of pages using tables will all refer to the same CSS file. You edit one file.

Yes, if you want each element on your page to be independent from any other, then using div's is the way to go. I already said this in my earlier posts. Here's an example where it makes sense - www.live.com. The list of threads in this forum is an example where it makes sense to use tables.

J.D.

 

Ahh. So for instance, say you've got a table; first row is one cell and spans two columns; this is some banner area. The second row has two columns; the first is a vertical navigation; the second is content. This is the case for thousands of pages. For a relatively simple change let's assume you're given the task of moving the vertical navigation to the right side of the content instead of it being on the left. You're telling me you can change the order of the table cells without modifying the markup on each page? Or maybe the navigation is being changed to become a horizontal navigation just below the banner, and the content now gets 100% of the width. Can you achieve that without having to change the original table structure? Extremely doubtful. This is how tables locks you into a design. The only way to change the design is to edit each of the thousands of pages individually, which would take a lot of time and thus a lot of money.

I'm not the one who twice tried to counter an argument that was never made.

 

J.D.,

I have to respectfully ask that you read the posts that I an others submit. You said,

Well, I had stated in my post that you quoted,

What I said was that you offered a challenge without the context. I also said that you presented it for the sake of the challenge.

To go on, you have again presented another challenge without the full context of the page and purpose.

Honestly, I don't understand why you are arguing with me anyway when I have said, three times now, that there are times when you will need to use tables to meet the need of the client, project or end-user.

All that being said -- please read, and understand my meaning before criticizing.

All the best,

Jay

 

How about a code off? I have a layout designed, which I'm sure you guys can do it One of you does it in tables, the other CSS?