Why do people wish for tableless with CSS?

[cashblogs]

Hello members

I've always wondered why, I found an answer in bandwidth economy, but other than that, how do they expect us to do it? With padding?
Any advice, comments?
thanks

[stymiee]

Why is easy:

1) Easier to update
2) Faster loading pages
3) More control

[MattEvans]

Sometimes you can do things that could be done with tables with CSS instead; sometimes you can't, or it just becomes close to a waste of time trying (if you find your almost para-implementing tables with CSS + javscript, you're certainly wasting your time).

i guess the thinking is that a table is a restrictive structure (defined in markup) and CSS can be modular (by using different stylesheets)

CSS and tables aren't incompatible or exclusive. If you're being asked to do something without tables, you should ask the person commissioning you if they have a good reason why not to use them; and a reason based on heresay/myth-mongering isn't a valid one.

Here's some myths to dispell:

Myth - Screenreaders can't read tables
Fact - Well organised tables are easier to read in logical order (using a markup-based screenreader) than a load of floating/absolutely placed elements.

Myth - Tables are deprecated in the latest W3C HTML specs.:
Fact - Tables are not deprecated in any HTML or XHTML specification, although the WAI do advise against the use of tables in circumstances where they are inapropriate, or could be confusing if linearized.

Myth - Search engines don't like tables, a site without tables is going to get a lower rank in a search engine.
Fact - Search spiders don't like confusing or invalid markup, but they are intelliigent enough to work out what is markup and what is keywordable data. If your headings and primary keywords are in a table, you could probably organise your page better; but a spider just sees valid block level elements containing text, in the same way it would see any hierachy of block level elements.

Myth - Tables make my markup longer.
Fact - If your markup is shorter without some tables and still does what you want it to, then it probably wasn't neccessary to use those table in the first place. Standard "CSS-only" replacements for tables (which tend to make use of elements in replacement) often contain at least as many elements than , and elements in a table approach, and often suffer from browser compatibility issues or have a 'breaking threshold' (the point at which either a screen size or data length cause visual messiness) far lower than a table.

This is getting to be something I reiterate quite often. You'll find it's worth researching how to do things using different methods, but it's not worth restricting yourself in any direction for any reason.

[MattEvans]

Why is easy:

1) Easier to update 2) Faster loading pages 3) More control

That went through as I was typing out my micro-essay...

As a rebuttal to 1, that depends entirely on how you update pages.

Tweaking the position of things is not the same as changing content, and a big style change usually involves some markup changing anyway.

In agreement with 2, in some circumstances.

In partial agreement with 3, except that a table is a controllable entity in itself, and sometimes control is more controllable when it's controlled. ^_-

[FC Jamison]

Ha!

It really is a preference issue.

Most people will tell you that tables were created exclusively to hold tabular data...and that any other use is wrong.

Since we have been using tables long before CSS, this is obviously false.

If your client doesn't care and you are GOOD at using tables, knock yourself out. If you are using 50 tables to position items on a small page, however, you should really look into learning CSS.

[stymiee]

ost people will tell you that tables were created exclusively to hold tabular data...and that any other use is wrong.

Since we have been using tables long before CSS, this is obviously false.

That's because tables were the only way to control a page's layout. Until CSS came along, and was fully supported, it was either use tables (incorrectly) or have a basic top-to-bottom page. In other words, using tables were a hack.

Tables are meant for tabular data.

[roryt]

That's because tables were the only way to control a page's layout. Until CSS came along, and was fully supported, it was either use tables (incorrectly) or have a basic top-to-bottom page. In other words, using tables were a hack. Tables are meant for tabular data.

That is a perfect way of putting it. I also think one of the most important things for me is how much neater and easier to edit your html becomes.

The other day I had to make a quick design for someone who wanted to add all the server-side stuff themselves and they asked me to do it with tables and it took me I would say (with no exageration) about 10 or 20 times longer to do it than if I had just used css and no tables.

[FC Jamison]

That depends on what you consider "wrong."

Technically, yes, according to the W3C, tables for layout is "wrong." I think browsers still have a little way to go in the way of rendering CSS uniformly across platforms, so sometimes a table is easier for those who are familiar with them.

I personally use CSS...but I won't hang someone who doesn't (unless they are working on my site).

Hey...I've been known to use a screwdriver for a chisel in the past. It may not be "right"...but it works in a pinch.

[MattEvans]

I think a definate distinction needs to be drawn between designing with less tables, and tableless design.

Rigidly tableless design is as logically defunct as throwing all of the screwdrivers out of your toolbox because a chisel is good for presentation.
Mythical "CSS-only" chisels cause as much of a mess to the screwhead of any tabular data layout (which may or may not be presented as a table of figures) as a screwdriver would to a woodcarving.

Design with less tables is a process of natural selection. If "CSS-only" (which is an absolute myth anyway) could do everything tables could do, and reliably, and with the same markup overhead, and without being overall more hacky than a table solution, nobody would use tables; even if it were only to escape pre-spoken criticism.

All HTML markup is presentational to a point; HTML has almost none of the useful features a data definition language would have, and yet it's widely spoken as being 'data' that needs to be separated from presentation. All CSS solutions require markup, otherwise you have one element to work with; (and even then you need a little markup).

You'll find, that the best designed websites and the best website designers make good use of the inherant advantages of tables, where and when they are appropriate.

I think it'd also be good to talk about the different types of website. Flashy graphical one-to-five page info-sites that never change unless the "website designer" gets another hefty contract payment probably never need a table. Each page can be carefully designed and tested on every browser version, and it'll always look good because it'll never change anyway.

Sites that present dynamic lists of anything (forums are a good example) will almost always use a table to present something, somewhere. Tables line up their rows and columns, tables are easily visually interpretable, tables can easily be populated from a database. Using a combination of HTML DIVs and SPANs and CSS to emulate a tabular layout for the data is always going to be 150% hacky.

In essence, this is exactly as the W3C put it, tabular data (possibly taken directly from a database table) could be presented in a table, and for the most part, should be presented in a table.

The same applies whether the HTML data is manually entered or automatically generated, provided there is some logical or meta-logical link between "these values" and "those values". In essence XML itself (and thus XHTML, and thus HTML if you agree that HTML is essentially occasionally-closure-implicit XHTML) is an arbitrarily-dimensioned nested tabular structure.

Where the path between data organisation and data layout lies will for the most part, and providing you're not aiming to confuse, fall along parallel lines. I fail to understand why double-implementing those lines could be of any benefit to anyone. Applying positioning CSS to a load of identically classed objects to arrange data that could be better organised seems somewhat backwards to me. Perhaps these CSS-only designers are aiming for totally content-ordered-markup, which seems to be mostly an SEO myth.

If you want to design without tables, definately try it. If you use one table where it's appropriate, you don't design without tables, you (perhaps) design with less tables. Neither way is inherantly wrong.

[mrclean]

In order to keep up with the "trend" of modern design techniques you should really learn CSS and tableless (or less-table ;)) design practices. The key benefits I can think are as follows:

1) Using CSS makes your site more accessible to those with disablities and textbased web browsers (Lynx).
2) CSS makes your code easier to read and understand by search engine bots. (and yourself sometimes)
3) It's good practice to keep your Presentation/Layout layer seperate from your Data/Content layer. (updating is in-fact easier).

Think of it this way: You wouldn't use Excel to design a webpage so why would you use tables. Move on to CSS and don't look back.

[MattEvans]

In order to keep up with the "trend" of modern design techniques you should really learn CSS and tableless (or less-table ) design practices. The key benefits I can think are as follows:

1) Using CSS makes your site more accessible to those with disablities and textbased web browsers (Lynx). 2) CSS makes your code easier to read and understand by search engine bots. (and yourself sometimes) 3) It's good practice to keep your Presentation/Layout layer seperate from your Data/Content layer. (updating is in-fact easier).

Think of it this way: You wouldn't use Excel to design a webpage so why would you use tables. Move on to CSS and don't look back.

Webpages with CSS are nothing without HTML ^_-

Perhaps my fault, but the thread thinking has deviated into assuming tabled designs make no use of CSS. This is far from the truth.

CSS by itself does not make sites more accessable, or search engines more effiicient. Using CSS may make sites more accessable, or it may make them less accessable.

Consider, a user with moderate long-sightedness; who prefers to view pages without any stylesheets atall. Not by overriding certain stylesheet rules, but by completely overruling stylesheets.

Anything now that uses CSS to re-order page content in a "tabular fashion" fails immediately and to the user, un- interpretably. Any organisiton of data is now as the document would read in markup, with markup-standard headings, fonts, and positions where elements are used. Tables noteably, still hold data in the same relative place.

Consider now, that instead of overulling stylesheets, the user reads a site with tables with their screenreader. The screenreader is optimized to deal with tables intelligently, as a table can be logically split into columns and rows, and read in a user specified order, perhaps with an aural repeat of headings on every other row for clarification. Even visually, a linearized table can still be interpretted using a reading convention rather than a series of reading assumptions.

A site using CSS to rearange content will hit a potential problem, depending on the screenreader used. Unfortumately, screenreaders are not a very well developed end of the software industry; ones I have tried only read in markup-order, and do not respect relative positioning of text blocks with respect to reading order. Of course, this favours well organised content. But it doesn't take CSS into account whatsoever (aural CSS rules do apply, but visual rules for the most part do not apply, and/or are not well standardized).

Using CSS makes your code as easy to understand as your code without CSS is easy to understand. If your code is not easy to understand, CSS will make it no easier. If your code is easy to understand, a lack of CSS will not make it more difficult.

It is good practise to keep the data and presentation layer separate, CSS and HTML are both presentation layers. Lynx sees HTML as the only presentation layer. Lynx doesn't care what your CSS stylesheet says. DIV hacks make Lynx-viewed pages vertically enourmous, tables are interprettatable in Lynx, because they are displayed as indented lists.

Finally, you shouldn't do anything to keep up with trends, by definition, a trend is in passing.

And even more finally, you can't move "on" to CSS. You can move "in" to CSS, but if you jump onto CSS and think you can leave HTML behind, you'll be more than a little marooned.

Personally, if I could design pages in Excel, I would. Excel has a predisposition for automation, and a concept of value transference across multiple dimensions through an infinate choice of functional gateways. Excel + CSS would kick a$.

[mrclean]

Personally, if I could design pages in Excel, I would. Excel has a predisposition for automation, and a concept of value transference across multiple dimensions through an infinate choice of functional gateways. Excel + CSS would kick a$.

Easy there Dennis Miller. No need to get all esoteric and completely literal (I think it goes without saying that you must have HTML) on everyone. This may be the first time ever that I was offered a chance to look at Excel on such a philosophical level. Thanks, but no thanks. Back to the point... Web technologies grow rapidily and will continue to be one step ahead of accessible browsing technologies. (Need we not forget that older screen readers could not parse tables correctly) This all comes down to what the designer prefers in the end. Tableless layout should be learned as another approach, because who knows if it will fade away or become the standard....

[MattEvans]

Well. I can't debate unless I'm permitted to be completely literal, and to take things said as completely literal. Anything else would be, or result in the necessity for an assumption, would it not?

----

Hey. Overall apologies; I'll even drop out of the debate mode. I absolutely agree it's down to designers to chose, and has always been.

I should warn, I'll probably always argue about this when it comes up. Perhaps it's because I've never heard a good reason to change my mind, and the same reasons always come up.

Personally, I minimize the use of tables wherever possible; but sometimes, CSS and minimal markup alone is just too darn unreliable across browsers/with variable content. If it doesn't work today, it isn't working.

As roryt said, he finds it quicker to get a result with CSS alone. For the most part, I find it quicker to get a result with tables. I understand CSS, I just find it unsuitable after multiple attempts, when trying to do things that to me seem simple, and easy, with tables; including the entire structure of a page. I visualize the entire page as a tabular data structure. And thus I conform to the W3Cs recommendation.

Perhaps that is the fault of browsers, perhaps that's a fault of gaps in the specification of CSS. Perhaps it's a fault in my use of CSS.

If I don't like a table, I get rid of it. But I don't aim to design with, or without tables. I just want to get my prototype/concept, onto the web, ASAP, and have it look the same everywhere.

And I suppose that's what all web designers want.

[mrclean]

Well said!

[roryt]

Personally, the only places i use tables are when I am displaying data that has to be set in rows, because then it just makes sense to do it that way. Otherwise my markup just gets so messy that it becomes unreadible and less productive.

[Vinoth]

because search engine likes it very much and you can make it compatible more with all browsers.

[stymiee]

because search engine likes it very much and you can make it compatible more with all browsers.

Untrue on both accounts.

Search engines couldn't care less if your site is tableless. They don't know the difference and it in no way indicates the relevance of a page. Going tablesless just means less code for them to sort through to find the content.

Only modern browsers support CSS enough that tableless designs can be used. Generation 4 and earlier browsers either can't handle them or handle them so poorly that they just don't work. Even generation 5 and 6 browsers have some issues with tableless design that requires a designer to know what they can and cannot do.

[roryt]

On the modern browser point: the large majority of people will have the latest version of their browser or at least on version back. But then again different browsers do display tables differently, the skill is to build the website so that it doesn't.

[MattEvans]

There's definately more output variety when it comes to some of the CSS placement/overflow rules in modern browsers than there is with table display rules, regardless of defined document type.

Tables are certainly more reliable when it comes to backwards display compatibility; there's not much that can go awry with a table: until you hit a text-only browser that is...

I disagree that everyone has the latest version of their browser... That's like assuming everyone uses Windows XP, and every WindowsXP user will be on Vista when it comes out publically.

I have a partition on this computer that boots Win98 with an IE version maybe before 5. MS have discontinued Windows 98 and ME support, so there's no neccessity for them to continue realeasing browsers that are compatible with Windows 2000 or lower. Luckiliy, I have more than one operating system on this computer; but not everyone has that luxury.

I haven't been on that partition since I installed the OS there, but it would be interesting to see how it renders newer standards of page..

It definately does pay to know, or at least be able to work out what you can and cannot do with or without tables, and it probably pays to define your target audience quite early in a project.

[roryt]

I disagree that everyone has the latest version of their browser... That's like assuming everyone uses Windows XP, and every WindowsXP user will be on Vista when it comes out publically.

All though there is alot of sense in what you have just said. I did have some logic in mine.An operating system costs money, and alot of it, whereas browsers are mostly free and available quickly.
People who access the internet have an internet connection which means they will probably be notified by ms every 10 mins to download the latest updates, including browser updates.
People that have win 98 will most likely have ie6 if they are on the internet which remember is the only way they are going to view your site.
What i am trying to say is that browser compatibility should not be much of a worry when switching to css design, because most things can be fixed.