tables vs css

[Kaycy]

I was recently told that tables are out and css is in. Is this correct?

[colweb]

Yes and no, but the debate is still going on.

CSS is in, no doubt about that. The benefits of using css are huge. Every modern site uses css nowadays.

As for tables, they are out but not completely. There are still situation where css is "not up to the task" so to speak and it easier to use a table. And if you have data that should go in a table use a table.

Some, but I already wrote "the debate is still going on", find every page with a table in it wrong and make incredible difficult pages with an enormous amount of floating divs (all defined in css) to replace a table .

[Kaycy]

Ah, ok. Thanks. I love tables but now am starting to learn about CSS as well.

And merging the two ideas together where/when needed. :)

Yes and no, but the debate is still going on.

CSS is in, no doubt about that. The benefits of using css are huge. Every modern site uses css nowadays.

As for tables, they are out but not completely. There are still situation where css is "not up to the task" so to speak and it easier to use a table. And if you have data that should go in a table use a table.

Some, but I already wrote "the debate is still going on", find every page with a table in it wrong and make incredible difficult pages with an enormous amount of floating divs (all defined in css) to replace a table .

[drjohn]

Tables were invented in html for displaying tables of data.

People then tried using them to control the visual layout (yes, I admit it, when I was younger I did this too).

Then in 1996, CSS came out, and by the end of the century, CSS was adopted by pros to layout pages. So it is not some new technique, and by internet standards it is old.

There is NO debate any more (not since about 2000 - 2002 anyway).
Use CSS, it was invented for styling pages.
Use tables for displaying tables of data.

[colweb]

There is NO debate any more (not since about 2000 - 2002 anyway).

Well even here on Daniweb, the question about tables versus css comes up from time to time and every time there are arguments for and against the use of tables for layout.
I agree, the golden rule is to avoid using tables. But there are still situations where a table used for layout is simple and easy (like for complex forms - try to do that without a table).
I also read and post on several other forums. My experience is, the question and debate is still going on.

http://www.microsoft.com/en/us/default.aspx is the home page of Microsoft. You would expect them to know a thing or two about computers and stuff like that. Well they do and they use a table on this page. Not for displaying data that should go into a table, but for the menu. (css is used to style the table, but the menu is not in divs).

Search on Google "table vs css layout" 4,000,000 results. That says its all.

[limohouston]

I agree with you CSS is better than HTML tables.

[drjohn]

The tables vs CSS discussion comes up when a beginner first tries tables for layout, then someone points out that tables are for displaying data. Then people discuss the topic. This is exactly what has happened here, isn't it? There is no debate among experienced users and pros.

As for forms and tables <sigh>
http://designshack.co.uk/articles/10-css-form-examples

http://www.alistapart.com/articles/prettyaccessibleforms (nice colour gradient, try that in a table)

http://www.themaninblue.com/experiment/InForm/index.htm (the examples, not the crude unstyled version, of course)

http://articles.sitepoint.com/article/fancy-form-design-css
(they even have an entire book of fancy forms, all by css)

http://www.webdesignermag.co.uk/tutorials/make-your-forms-beautiful-with-css/

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
(nice basic tutorial)

And note that these are OLD articles.

PS as for Microsoft knowing about things like web design let me say just one word
FrontPage ;)

[Kaycy]

hmmm Ok. I'm getting it. Thank you for your post.

Tables were invented in html for displaying tables of data.

People then tried using them to control the visual layout (yes, I admit it, when I was younger I did this too).

Then in 1996, CSS came out, and by the end of the century, CSS was adopted by pros to layout pages. So it is not some new technique, and by internet standards it is old.

There is NO debate any more (not since about 2000 - 2002 anyway).
Use CSS, it was invented for styling pages.
Use tables for displaying tables of data.

[Kaycy]

Looking at the code source for the microsoft page, I noticed a lot of divs/spans, are these part of css? And these take the place of tables? I have seen these on a lot of pages.

Well even here on Daniweb, the question about tables versus css comes up from time to time and every time there are arguments for and against the use of tables for layout.
I agree, the golden rule is to avoid using tables. But there are still situations where a table used for layout is simple and easy (like for complex forms - try to do that without a table).
I also read and post on several other forums. My experience is, the question and debate is still going on.

http://www.microsoft.com/en/us/default.aspx is the home page of Microsoft. You would expect them to know a thing or two about computers and stuff like that. Well they do and they use a table on this page. Not for displaying data that should go into a table, but for the menu. (css is used to style the table, but the menu is not in divs).

Search on Google "table vs css layout" 4,000,000 results. That says its all.

[Kaycy]

Thanks for all the links. I skimmed over them then bookmarked ALL of them. :)

Boy, so much to learn about CSS!

The tables vs CSS discussion comes up when a beginner first tries tables for layout, then someone points out that tables are for displaying data. Then people discuss the topic. This is exactly what has happened here, isn't it? There is no debate among experienced users and pros.

As for forms and tables <sigh>
http://designshack.co.uk/articles/10-css-form-examples

http://www.alistapart.com/articles/prettyaccessibleforms (nice colour gradient, try that in a table)

http://www.themaninblue.com/experiment/InForm/index.htm (the examples, not the crude unstyled version, of course)

http://articles.sitepoint.com/article/fancy-form-design-css
(they even have an entire book of fancy forms, all by css)

http://www.webdesignermag.co.uk/tutorials/make-your-forms-beautiful-with-css/

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
(nice basic tutorial)

And note that these are OLD articles.

PS as for Microsoft knowing about things like web design let me say just one word
FrontPage ;)

[almostbob]

I like tables for tabular data, its much easier to sort a table by column to change the view of data, by name size, address, etc. but that is for data that is tables, the layout of my tables, the way they look, is set in css,

Here's my 2penneth worth:

html tables for data.
css for almost everything else.
The main argument for this is accessibility, flexibility and 'updatability'.
Trying to get everything to behave properly in all browsers via css can be really time consuming, but is usually worth it. The placement of form fields and their labels is one exception I sometimes make. I can here purists howling at the moon at that, but for me it's productivity vs. idealism.

[drjohn]

Kaycy, a div is what is called a generic container, a box, a block, into which you put things - menus, content, images. You can have all of them in the one div, or you can have one div for each, whatever suits your layout.

A span in an inline thing, used to style a small part of a bigger thing. Like the words inline thing above this. (Note that when you make things bold here, it is NOT html you see but another type of code that teh forum code knows how to convert into html.)

The MS site is VERY strangely laid out, it uses multiple spans and divs in many places, often dozens at a time, when often one would be enough. It is probably generated via an in-house content management system. These are often designed to be robust enough that the user, who may know nothing about web design at all, can produce usable content that will work in any browser. So a technical expert on, say anti-virus software might be explaining how the anti-virus software works or telling you about new viruses, and just entering text into a box, like the one I'm using. Similarly, a public relations person may be producing a news item to appear on the page, again with no knowledge of html, while a database expert might be telling you about Access, with no knowledge of web design.

So, the code behind the page is not necessarily written by an web expert, but rather a programmer who makes the system that pulls stuff from a database, and he may or may not use tables of divs or spans correctly. He is very much more concerned that any fool can use the system to enter data that will end up on a web page and display regardless of the browser.

So the code is highly unrepresentative of what web standards should be.

Google is the same - their pages' code is well known to be technically flawed, but they have reduced the amount of code they use, taking short-cuts, knowing that every browser will correctly error-correct their mistakes. Why? Because when you send out millions of results every hour or rminute, the less code you send out, the faster the system is overall. They are famous for using things wrongly and yet never failing to have the results displayed as expected. It is a very clever set of deliberate errors that ALL get corrected by the browser.

So ignore the code on the MS site, and to some extent on google. It's a red-herring to refer to these sites' code. A bit like saying look how a racing car driver drives, let's drive that way on our road.

[Kaycy]

I'm beginning to see a lot of difference. I created a website for a customer, all tables, sorry, but that is what I know, NOW, and looking at these sites with CSS and am seeing a MUCH easier way of making the pages look nicer and less frustrating. LOL I made one little mistake when I was trying to do a script with the site and totally messed up the tables! I have spent 4 days going back over every page to try and fix all the broken tables. phew! I did use includes so that saved a log of pain. It was like a bookkeeper trying to find out where that one little penny went that is missing and messing up the totals.

I like tables for tabular data, its much easier to sort a table by column to change the view of data, by name size, address, etc. but that is for data that is tables, the layout of my tables, the way they look, is set in css,

[Kaycy]

Time consuming! LOL Yeah, building websites is 'time consuming'! But, yes, I am starting to see the light. I have been reading up on CSS in my Dreamweaver book so I am on my way to learning something about it. :)

I do get frustrated at times trying to figure things out, like what I did wrong to this one customers web site with the tables, but I eventually do get them figured out. I like trying to solve problems so this is right up my ally, so to speak. :)

Thank you for your reply. *hands you a dollar because of inflation*

Here's my 2penneth worth:

html tables for data.
css for almost everything else.
The main argument for this is accessibility, flexibility and 'updatability'.
Trying to get everything to behave properly in all browsers via css can be really time consuming, but is usually worth it. The placement of form fields and their labels is one exception I sometimes make. I can here purists howling at the moon at that, but for me it's productivity vs. idealism.

[Kaycy]

I think I'm going to like learning to use CSS and the other codes instead of tables. I know there will be times when I will use a table but hopefully not for an entire site. :)

Now, that I'm getting the idea of CSS/Div's/spans now I just have to learn how to use them. :)

Thank you for your advice. I do look at coding behind sites, more out of curiosity than anything else. :)

Kaycy, a div is what is called a generic container, a box, a block, into which you put things - menus, content, images. You can have all of them in the one div, or you can have one div for each, whatever suits your layout...........So ignore the code on the MS site, and to some extent on google. It's a red-herring to refer to these sites' code. A bit like saying look how a racing car driver drives, let's drive that way on our road.

[Kaycy]

This would indicate a good time to use a table?

In any case, be careful about using CSS for lists since it might not show the way you want it to on all browsers.

[almostbob]

consistent layout with css, when you go from
'my first website',
'my second website',
to
'my database driven website',

exactly what content will be on a page,
built on the server in response to prior page queries,
knowing the layout will work is vital

[Kaycy]

Ah, ok. Thanks.

consistent layout with css, when you go from
'my first website',
'my second website',
to
'my database driven website',

exactly what content will be on a page,
built on the server in response to prior page queries,
knowing the layout will work is vital

[Mikersson]

Tables are for use in tabular data, row and columns

then there is when the use of tables are justified.

CSS is used basically for separate the content and presentation

. Then we are talking about fdifferent things. But You can also use tables in the CSS then U can leave the Tables "out" and start to formatting tables with CSS http://dense13.com/blog/2008/08/23/styling-table-captions-with-css-fixing-the-width-problem/
I hope this give an answer to your questions and doubts.

Mikersson

[Kaycy]

I think that one made me more confused. I am beginning to see how tables works and for what and how CSS can control most everything that a table can. One thing I did notice on that link that caught my eye was a reference to "TH".
I know the <table><tr><td></td></tr></table> but have never come across the <th> before. What does this stand for?

Our desired table and caption

There's many ways to style tables, I'm going to focus on a table with collapsed borders, and a 1px border around each TH and TD.

... CSS http://dense13.com/blog/2008/08/23/styling-table-captions-with-css-fixing-the-width-problem/
I hope this give an answer to your questions and doubts.

Mikersson

[almostbob]

<th> table header,
a td with special attributes, can be styled separately to show as a header, can be accessed by scripts to toggle sorting on the columns below

@Kaycy - have a look at w3schools and <table>. It'll give you all the table tags. Personally, I use the <thead> around <tr><th> and <tbody> around the <tr><td>.

[Kaycy]

Oh. Interesting. Thanks. That makes sense. lol

<th> table header,
a td with special attributes, can be styled separately to show as a header, can be accessed by scripts to toggle sorting on the columns below