CSS vs. Tables: What's the Benefit?

You're on a forum! Post your page and ask for help. You'd probably have your answer within an hour.

I take it you didn't bother to visit the links I posted. They are all very graphical pages.

Other than it's original intent? It puts a picture on a page. There might be some text or whatever else on top of it and there might not. Where's the misuse? You're reaching for threads that aren't there.

Styles has *no* effect on semantics. That's the job of HTML. If, for instance, you're italicizing text to emphasize it but not using the EM element then those are cracks in your HTML code.

 

Here's a bit of a challenge for you. Grab the attached file and come up with a table-less layout that will work with any browser and will accomodate a picture of any size and will show each frame in the middle of a page, just like this page does.

J.D.

 

Sadly, for the moment you can't in IE. But even so, it's never really needed. You should always be able to know the dimensions of your images ahead of time. It can add a small annoyance, but doesn't actually limit you in any way. This is also a perfect example of how I was talking about table people being stuck in a certain way of thinking. You didn't just tell me to make a CSS version, you told me _how_ I'm supposed to make it. I _can_ reproduce that page exactly as seen, just not in the same way that conventional table wisdom would do it.

 

I didn't tell you _how_ to make this page. I just told you what's required on this page and you had all of the CSS arcenal at your disposal. The problem isn't in IE, BTW - on the contrary, IE will stretch div's with fixed width, while FF, Opera and other CSS-complient browsers, will simply cut the content of this div. Simply put, CSS defines shrink-to-fit behavior only for some elements and you just can't make it happen. Period.

The point, however, is the phrase "CSS vs. tables" is simply, uhm... not very knowledgeable, and whenever you hear somebody say "CSS vs. tables" (whether asking for an advice or asserting that that's the way to go), it simply points out a person who either knows HTML/CSS combo second-hand, picking up bits and pieces from various forums and blogs, or simply doesn't know it at all.

As for this example, it's just one of many - <ul> redefined to behave like a table, <br> used as a float stretcher, images used as if they were borders, etc. You get the idea. Don't waste your time on trying to avoid tables at all costs - use tables and CSS as a combo. Table defines the structure and CSS defines the style. Just like what you see in the example I posted - there's a table (the frame) and there's a div (the caption). It's that simple.

J.D.

 

I did.

I did. Already familiar with zen garden.

OK, we disagree. Good enough.

You seem to take critiques of CSS a little personally. Your reply to my post wasn't very nice.

 

No, you added extra contraints that is not required for the page. As I already said, I can reproduce the page exactly as it is, in both IE and FF.

No, I didn't. CSS does have support to do the job exactly as you wanted it done. IE does not support it, however.

I don't know what sort of code you put together, but I had your page along with all your unecessary requirements fully working in FF. IE simply did not support the properties needed to achieve it.

It can happen. It has happened.

Yes, styles manipulates other (semantically correct) elements to achieve the same visual effect as tables. The point, however, is that if you use any HTML element because of how it looks then you are misusing the element, and do not really understand what HTML is for. HTML defines document structure, not appearance. If it's not tabular data then it shouldn't be in a table.

You think your example is appropriate for a table? So then where is the table header? What value do the columns represent? What value do the rows represent? The only real reason you used a table was to get a border; a purely visual effect.

 

And since you like challenges, how about one for you? You saw my example from the CSS Zen Garden above? Could you do the same with tables? Could you have full control over the appearence of a page, an entire site even, by swapping out a single file?

 

Oooh you made that site from CSS Zen Garden? Very impressive

 

You mean did *I* write the style sheet for those designs? No. Those are simply examples; three of the 190 different style sheets that all provide drastically different, yet all beautiful layouts for the same HTML page.

 

Oh, I thought you made one of those designs

 

You are missing the point. CSS can be appied to any HTML element, including tables. So, to answer your question, yes, a design like this can be done with a combination of tables and div's. Are you impressed with pretty designs of these pages or the HTML/CSS that is used to produce this pretty design? If you are talking about HTML/CSS, I don't see much HTML/CSS challenge here - just a few absolutely-positioned elements and floats scattered among a bunch of static paragraphs and divs. Very nice designs, though (visual stuff, that is).

J.D.

 

How does that make it any more or less correct to use tables for non-tabular data?

So where would the table go? Unless you're actually marking up tabular data, a table exists to create a layout. Having a layout predetermined as part of your HTML document prevents you from having the full level of control that you would need.

Take for example one of the CSS Zen Garden examples I posted earlier <http://www.csszengarden.com/?cssfile=174/174.css>. I could easily see someone having used tables to create that layout. You honestly believe that you could take such a tabled design and transform it (without any changes whatsoever to the markup) into this <http://www.csszengarden.com/?cssfile=158/158.css>?

 

Tables are not only for stock brokers. If you need several adjacent elements to be synchronized in size, tables offer a simpler way to achieve this goal, compared to using stretcher <br>'s and similar approaches. In your example, imagine all of this content goes from the database - you would just loop through your result set and output same type of data, row-after-row. How's that not tabular data? Heck, are you trying to say that this very page you are reading right now is not tabular because there's no numbers in the columns here?

Open up the HTML spec and do some reading. CSS is supposed to be used where you see the word "deprecated" - or, more precisely, where style is supposed to be applied. Document structure, however, is defined by HTML and may be manipulated by DOM. CSS was never meant for this. In fact, the pages you are quoting redefine HTML elements (like ul's) in spite to a warning in the CSS spec against such practices (read the first note at the end of this section).

As I mentioned, the linkList element is an absolutely-positioned div - you can stick it anywhere you want on the page. The rest of the page can just be rendered as a table filled with div's, where appropriate.

J.D.

 

Everything you have just described is purely stylistic; no structural meaning to be found. So either you still don't understand what HTML fundamenally is, or you just don't care.

Very good. However, these are not the only inistances where CSS can or should be applied. The use of CSS is not limited only to deprecated elements. One of the goals of the latest version of HTML is "encouraging the use of style sheets instead of HTML presentation elements and attributes" [HTML401 2.3.2]. The HTML spec also explicitly states that "HTML documents that distinguish structure and presentation will adapt more easily to new technologies", as well as "[a]t the time of writing, some HTML authoring tools rely extensively on tables for formatting, which may easily cause accessibility problems" [HTML401 2.3.3]. "Authors also exploited tables and images as a means for laying out pages ... ince style sheets offer more powerful presentation mechanisms, the World Wide Web Consortium will eventually phase out many of HTML's presentation elements and attributes" [HTML401 2.3.5]. And of course, the one that definitively shows that the inventors of HTML and the WWW itself disagree with you: "Tables should not be used purely as a means to layout document content ... authors should use style sheets to control layout rather than tables" [HTML401 11.1].

When did I ever talk about using CSS to manipulate the document structure?!

First I'll copy the note here for everyone else to read, then I'll explain to you how you have misinterpreted it.

authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML)

What they are describing here is something like the following.

<div style="display: list-item; list-style-type: disc; margin-left: 1em">Example 1</div>
<div style="display: list-item; list-style-type: disc; margin-left: 1em">Example 2</div>

Code (markup):

This is what should otherwise be an unorderlist. But rather than actually marking it up as a list I have instead use DIVs and styles to create my own "document language". This is considered bad because the HTML UL element has "recognized and accepted meanings" and "classes may not."

Now that we know what this note is actually saying, let's go back and see if your claim that the sites I referenced suffer from this.

All headings are marked up as headings, all acronyms are marked up as acronyms (so far so good), all paragraphs are marked up as paragraphs, all lists as lists (still good). Classes and IDs are used only in cases where there is no corresponding HTML element. For instance, there is no HTML element for "quickSummary".

 

You are a funny guy, I'll give you that. Well, I'm glad that table-less design is working out for you (or at least for the people you admire). I guess we'll see your knowledge of HTML/CSS in a short while when you start helping forums members with your expert advice.

J.D.

 

I definetly need some HTML/CSS help hehe

 

You can already see if you want <http://forums.digitalpoint.com/showthread.php?t=38505>. Feel free to critique.

 

Pluses:

It's tidier

It's far easier to code, generally.

It's vastly more 'accessible' both to search engine bots and to visually impaired visitors using braille and screenreaders.

Sooner or later tables are likely to get deprecated

Overall you are talking about a 60% saving in file size, I'd say. Pages load faster, bandwidth halfs. Clearly a win-win.

Against:

There are times when you just have to sit and cry trying to get alignments right.

For a big site might, manually covering hundred, thousands of pages from tables to pure CSS and XHTML (1.1) is soul destroyingly tedious.

I tell you, a year or two on there's still whole sections of my main site that need doing

 

FeelLikeANut could you post your version?

 

My approach is to leave pages already done in tables (unless there's a real problem) but all my new pages are done with css positioning.

You didn't mention the problems of handling different screen set-ups -- different resolution, etc. Do you have tips for handling these?