When to use CSS and when to do it in HTML

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.