In remote times, web designers used HTML <table>s for positioning text on pages, which these days is frowned upon by every single book or tutorial. The proper way is to use CSS for positioning, or any other kind of formatting.
However, many people, aparently, don’t really understand why using tables for formatting was “bad”; they only hear that “good designers use CSS instead”, and, therefore, seem to think that any use of the <table> tag is evil. I believe I’ve even seen a web tool which analysed pages, and complained about any <table> it found (I don’t remember what it was, though).
The thing is, these people are missing the whole point! It’s wrong to use <table> for positioning stuff on a page, for several reasons, sure. But there is a proper use for HTML tables, which is what they were originally intended for: tabular data! Maybe you want to reproduce a section from a spreadsheet in HTML, or create a “real” table with rows and columns. In these cases, <table> is the way to go, and you shouldn’t be “ashamed” of using it. Anyone who complains about it is simply showing that he didn’t understand why using tables for formatting was wrong in the first place; he is just “going with what he hears”.
You can still apply CSS to tables, of course, to manage how they look. That’s what CSS is for.
One more tip: any table you create probably has row and/or column headings. The headings cells shouldn’t be <td>s, but <th>s, instead. Not only does it help with screen readers (for blind people), but it also allows you to easily apply different CSS stuff to the headings (you probably want them to look different from normal table cells).
Related posts:
RSS feed
The times “web designers used HTML s for positioning text on pages” are not over yet. Far from it if you look closely. Unfortunately.
Tables are not THAT bad…
First, I haven’t read a single argument on your post about why we shouldn’t be using tables… In fact, “It’s wrong to use table for positioning stuff on a page, for several reasons”: slow rendering, accessibility issues, less control over the global layout…
However, properly coded tables can render pretty quickly and, frankly, I don’t believe table rendering time is actually a problem in these broadband days. Nested tables can be a pain, however…
With proper HTML, you can also build a table layout that is still accessible to browsers for people with disabilities.
And (increasingly less important, I admit) tables do render properly in old generation browsers…
Mário: you’re right. Unfortunately.
João: you misunderstood me, this is not an “anti-tables” post, like “don’t use tables, use CSS”. In fact, it’s much the opposite: my point is that there is a proper use for tables, which is… to show tables.
It seems we went from “use tables for everything” to “using tables is a sin“, while the problem wasn’t with using tables per se, but with using the wrong tool for the job.
“I believe I’ve even seen a web tool which analysed pages, and complained about any <table> it found”
I remember of something involving a CSS stylesheet that simply would say:
table { display: none; }which, besides being a rather stubborn attempt at boycotting pages with table-based layouts, is a rather stupid one, on the grounds that it also hides legititimately employed tables. An equaly stubborn but less stupid rule would be one of:
body > table { display: none; }/* or */
body > table:first-child { display:none; }—–
@João Pereira:
Problem with tables is: because of their supposed meaning/purpose, when read on a screenreader, each table is preceded by some informaiton about it — namely, number of rows and columns. On the other hand, that’s a dray when the table isn’t used with any (logical) meaning at all, but only for presentation purposes (even more so with nested tables, with empty cells, empty rows, and spacer GIFs with super useful ALT attribute values like “*” — this is a specialty of the portuguese public administration webshites). This is corroborated by a blind coleague of mine.
Furthermore, using tables for layout breaks the separation between content and presentation — you are forcing, inside the content (HTML), that the presentation should be in the form of a grid, when that is something up to the presentation (CSS).
One thing that helps to the falacy is using the term “table” to refer to the table-like positioning of visual elements — which leads, in the minds of the unaware, to a direct mapping to the HTML <table> element; “grid” is a way much more appropriate term.
Have you looked at http://www.pai.pt? Beware viewing source it will burn your eyes!
I do not believe this