Tables are passé, they're boring. If you're still using tables for page layout then you're behind the times for Web development. Luckily it's easy to use CSS to position the elements on your Web pages as precisely as you could wish.
Poll: Do you use CSS positioning?
- Yes, for every page I write.
- Yes, most of the time.
- Yes, on less important pages.
- No, I don't know how.
- No, I don't like CSS positioning.
- No, I left my reason in a comment.

Hey, I read your stuff all the time. Is this comment functionality new? Anyways, you didn’t exactly give a complete lesson on CSS positioning, and I think it might have been a good idea to give a link to a good page where you can learn more about this.
I do my layouts with CSS all the time, it’s alot easier to make quick fixes by editing the one CSS file, rather go through each page editing numbers.
Oh and: Inline styles, YUCKY
Using an external stylesheet not only requires a lot less code than using tables but you also get to use more flexible layouts than the grid format enforced by tables and can change the layout of all of the pages on your site in one go instead of having to edit each page individually (with the resultant typos in several of them).
Tables ARE positioning elements!! Get over it. Table layouts are as old as writing but typewriters are really where we see the TAB key being used to line up information for display purposes.
Tables are robust where CSS layouts often are not and by the time you have added in the masses of CSS work arounds to make all browsers work some of the time, table layouts can often end up with smaller downloads.
Let me say it again – tables ARE layout structures.
Tables are NOT positioning elements in the general term. They are there to sort TABular data.
I don’t – for the life of me – understand why people refuse to sit down and learn CSS. You can do so much more with a stylesheet (in every sense of the word “more”) than you can without it. And all the font tags required for non-stylesheet sites WILL result in larger file sizes.
How can you say that
(table width=”50%” border=”2″ cellspacing=”3″ cellpadding=”0″ bordercolor=”#cc0000″)
(td)
(tr)
content
(/tr)
(/td)
(/table)
time and time again in an HTML document will result in a smaller file size than
(div id=”content”)
content
(/div)
?????
Anyone using tables in lieu of CSS is jaded, if not lazy.
CSS is so much easier to work with than tables. However, if someone wants to use tables for their layout, they should be able to do it. Eventually, they will be left out of the industry. It is like plowing with a mule. It works and they are used to it so, don’t rock their boat!
I’ve tried to use CSS positioning and I’ve gone through a few tutorials. Most of every tutorial I’ve tried is composed of how to do work arounds for browsers that don’t properly implement CSS positioning. A great many pages that I’ve seen that use CSS positioning have text written over the top of other text, especially near the bottom of the page.
Maybe you should run another series on CSS positioning and address those kinds of problems. Maybe, then, one could see how CSS positioning for layouts does a better job that old reliable tables.
I’m not a professional web designer. I’m just an amateur that works with a few web sites. Most everything I know about HTML, CSS, etc., I learned on the web from you. Thank you for all your help!
The one thing that I would love to see is how to use CSS to centre a page. With tables, it is easy and works on all browsers: create a table 100% wide and then centre another fixed width table inside. I have yet to see a way of doing this in CSS that works on all browsers.
Tables, still often good for doing an overall page breakdown, but I use PHP includes and CSS with it. Without those tables would give me no joy at all.
I would love to see the day all the browsers worked the same though.
I have spent hours trying to position even the most basic elements such as columns or wrap around text in css. Nothing works intuitively. The text runs outside the Div, the Div doesn’t expand as content depth on the page increases – it just gets chopped off, Div’s inside of other Divs show up completely outside of the layout… what used to take a few minutes with tables doesn’t even begin to make sense to a non-coder designer who has built dozens of sites in tables. I agree CSS has benefits, but it’s insane how cryptic all the floats and awkward positioning is – a step backwards requiring far more time troubleshooting than getting work done.
According to some books that I’d read, it is good to control elements in your page with tables and I oftentimes do it. Anyways could you please assist me on this? I looked over the example on this page about making rollover on a table. The thing is that if I was able to place the mouse pointer over it, the entire rows was then higlighted. The purpose for highlighting the table rows is a good practice to make a page interactive but I would just want to see an example where EVERY cell, not the ENTIRE row is highlighted would be much more okay I think. I look at the codes in Javascript but I’m not much knowledgeable with Javacripting so I don’t know how to edit the codes in order to highlight 1 cell on the table at a time — how ridiculous! Anyways, All I want here is to know how to achieve one I mentioned above and an email would then much be appreciated. You can somehow reach me at angelo.ment@gmail.com. Thanks so much.
Hello Jennifer Kyrnin, Razer here!
I recieved your email regarding highlighting one
cell in a table. This is prior to my request dated
March 15, 2009. I would just want to know when
would be the approx time that the example will be
posted on that section because you know what? Im
really eager to know it ASAP.
But hey, wait. I looked on this example on the
internet and I found various examples on how to
highlight specific cells on a table. I found something helpful and I really become interested on this so I immediately copy and paste the code in my html document. This would look like this:
On the section:
td.myClass:hover {background- color:white; color: black;
margin: 1em; border-collapse: collapse;
padding: .3em; border: 1px #ccc solid;
On the section:
Home
Profile
Contacts
And you know what happened? It really works so fine. Every cell on my table was then highlighted specifically.
Well, I’m using Mozilla Firefox that time. I just
don’t know what version it is.
But the problem occurs when I get back to my HTML document and by this time using DIFFERENT BROWSER and that is Internet Explorer 7. When I move my mouse pointer over each cell in the table, nothing really happens. I don’t really know what seems to be the problem but I think it’s browser issues or whatever.
I really feel so sad about that.
But anyway, because you are the expert on this
matter and I’m so confident on your examples,
I will just gonna wait until you can
post such example on the article once you’ve
once posted on About: making rollover on table
rows. I will surely be glad if you could post
that code the soonest possible time or you can
also send me an email containing the codes that
would also be of great help.
I really look forward on this matter and hoping that
will be addressed ASAP.
Thanks so much and once again, Razer here.
My clients don’t care if I code in XHTML. CSS, Flash or Pig Latin. They want results asap. I can provide that with “Tables & Cells”.
CSS Positioning was created by Code Monkeys so they could try to reclaim their dominance of web development.
It ain’t gonna’ happen. Get over it. Go back to writing your goofy articles about “hacks” as that’s all you have left.
Bye, bye.