1

I try outline the pros and cons of CSS compared to tables and learn in which case to use which. Then advantages using css instead of table and files

  • CSS is for information and tables for data (fuzzy which is which)
  • CSS you can enlarge infinitely since it's code
  • CSS you can make multilingual easily just input the text
  • Also simple to change colors

Do you agree or propose otherwise? It seems tables in theory should be rarely used, do you have arguments in favor of HTML tables?

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
Niklas Rosencrantz
  • 25,640
  • 75
  • 229
  • 424
  • 1
    possible duplicate of [Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – Yi Jiang Oct 30 '10 at 03:27
  • possible duplicate of [Tables instead of DIVs](http://stackoverflow.com/questions/30251/tables-instead-of-divs) – user229044 Oct 30 '10 at 04:41
  • Has been discussed here ad nauseam, there are dozens of duplicates. – user229044 Oct 30 '10 at 04:42
  • There is no 'comparison'. They each work together (or separate). This is like asking "Should I use my hands or my car to bring my groceries home?" The answer is: BOTH. Yes, you could try to artificially use only one or the other... but you would be needlessly making things more difficult. Use them both - each appropriately. – Andrew Barber Oct 30 '10 at 06:07

4 Answers4

12

Your comparison is faulty, IMO; CSS and HTML Tables are wholly complementary. They work together extremely well, in fact. So, it is not "do I use tables or CSS".

Tables should be used when you have something that conceptually and presentationally is similar to a spreadsheet. You can define that how ever you like, but that gets the broad idea across.

CSS should be used for style and layout of (X)HTML... tables and all.

Andrew Barber
  • 39,603
  • 20
  • 94
  • 123
  • Thanks for the answer. Is in general use tables for an admin ui and use CSS for a user ui towards a better comparison?? – Niklas Rosencrantz Oct 30 '10 at 04:46
  • I guess using tables for layout in an admin-only UI isn't SO bad... but in my experience, once I got used to using more semantically-correct markup, using classed/id'd DIVs became at least as easy as using tables was in the old days for layout. Easier, actually, IMO – Andrew Barber Oct 30 '10 at 04:51
  • Thank you Andrew for the info. When something successful like craigslist uses tables to display tables, can you agree that CSS could be just as good or even better choice for something like displaying tables like the old days since craigslist didn't change layout for very long time and uses tables where I would use CSS. Which would you use there specifically? – Niklas Rosencrantz Oct 30 '10 at 05:46
  • 1
    I refer you again to my answer: Your comparison is faulty. CSS and HTML Tables are complementary. It is NOT use one OR the other. You can use both. Or neither. Craigslist actually uses *both*; they use CSS to style (extremely minimally) their tables. You are setting up a completely false and useless argument here. – Andrew Barber Oct 30 '10 at 06:04
6

Actually, with CSS Selectors, you can gain incredibly flexible formatting for tables using CSS. If anything, CSS makes tables a viable display option even on modern websites.

CSS 3 Selectors: http://www.w3.org/TR/css3-selectors/#selectors. Some of the more esoteric selectors are not supported in all browsers, but a surprising number work even in older versions of IE.

Addressing your specific questions:

"CSS is for information and tables for data (fuzzy which is which)"

I would rephrase this to say that tables should only be used for tabular data, but CSS can be used for anything style related (including tables).

You are probably referring to using CSS as preferable to using tables for page layouts, which I typically agree with because of the clean markup, flexibility, and the fact that you are forced to write neater code (versus letting a table automatically take care of things for you).

"CSS you can enlarge infinitely since it's code"

All browsers have a zoom function, and all CSS (including tables) can be based on em units for relative sizing (not always a good idea, but possible).

"CSS you can make multilingual easily just input the text"

Localization is usually more of a server function, not a markup/styling operation.

"Also simple to change colors"

See my earlier point about using CSS to customize tables.

Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • +1; CSS can make tables go from an ugly, boxy old way of lining stuff up in columns, to something that gets the data displayed and looks real good doing it, too! – Andrew Barber Oct 30 '10 at 03:33
  • Thank you for answering. My admin ui is more like excel while the user ui is more for style. +1 about tabular data that looks have a general definition "used to reason or make decisions." since both the admin and the user ui can be described that way. Do you agree? – Niklas Rosencrantz Oct 30 '10 at 04:53
  • @LarsOn - if you have an admin UI that is more like Excel, then tables may be a better fit. My general guideline is that if a list of data has more than 4 columns, I usually start looking towards a table rather than a DIV-based layout. – Tim M. Oct 30 '10 at 05:42
6

A major problem with tables is that it's not accessible. When a visually impaired person uses a screen reader to navigate a table-based web site, the screen reader will say row, column, column, row, row, (a little bit of useful information), row, row, column, column, row..... which, as you can imagine, is very annoying. Also, when read in this way, things tend to appear totally out of order.

If you build a website with divs and spans, screen readers will get straight to the content, because all the layout information (which is useless to blind people) would have been tucked away in a separate CSS file. This is especially important when you're building websites for certain institutions which need to follow federal accessibility guidelines.

kijin
  • 8,702
  • 2
  • 26
  • 32
3

HTML tables are not bad for tabular data. Divs controlled by CSS can be powerful for less standard designs, and do have a greater degree of control associated with them. Really it all comes down to using the right tool for the job; if it works, then use it.

dreadwail
  • 15,098
  • 21
  • 65
  • 96
  • I understand and also could look for a technical benchamrk doing same output with CSS and tables for a simple benchmark if response times differ. – Niklas Rosencrantz Oct 30 '10 at 04:54