CSS vs. tables, again

I’m on a mailing list with a group of professional women designers and developers. There’s lots of conversation flowing and it occasionally turns very lively – as it did yesterday when a member posted about her frustration with CSS and continuing attachment to tables. It ignited a veritable firestorm of commentary! It was fun to read, but it did help me clarify a few reasons that I love CSS and think it’s worth the time of any web professional to learn it. Note I didn’t say ‘master’ it, because I don’t think there are a whole lot of people that can do that, but learning? That’s one of the reasons I’m in this profession, because I like to be challenged.

Anyway here are five things that I think are major advantages of CSS over tables:

  1. You can put things where you want them. When I was using tables I used to get so frustrated with having to line things up under the cells above them and split cells into more tables and more cells just to get the layout to work the way I wanted it too. With CSS and absolute positioning, relative positioning and floats, I don’t have to think in advance how I’m going to slice up my design to fit – I can put elements where I want them to go. As a designer this was the key reason I switched to CSS in the first place.
  2. Shorter code. Now for a small page it doesn’t make a lot of difference as far as the length of code. But I worked on one client’s site (70+ pages) where every page was full of nested table after nested table after nested table. Cleaning up one of those pages – converting it from tables to CSS – often meant a reduction from 1,000 or more lines of code to 400 or less. Over the entire site, that’s a huge difference. The pages load faster, they take up less room on the server. Not a benefit for SEO, but certainly a big one for users with slower connections.
  3. Content first may be better for SEO. With tables, the page is read by the search engine in the order it appears in the code and presented that way on the page. But with CSS and positioning, I can put my big headline and block of content up near the top of the page and drop the navigation, header, sidebar and footer to the bottom. That means that Google gets to the meat of the page right away instead of wading through a lot of code.
  4. Easier maintenance. Having rewritten the aforementioned table-based site, I can tell you it can be a nightmare trying to keep track of multiple nested divs on a 1,000-line page. Once the site is converted to CSS, maintaining it (either yourself, your client or another web developer) is so much easier, faster, and cost-efficient.
  5. Better for your clients. I firmly believe that not providing a client with clean, well-written code is a big disservice. They’re paying you to be a professional and CSS is a professional’s tool (just one of them, but a key one). When you provide a client with a well-built site that allows them to change the entire look and feel of their website experience with just a little work, rather than a redesign, that’s huge.

I will now step off my little soapbox and slide it back under the table.

I know that learning CSS can be tough; I liked the challenge (one of the reasons I’m in this profession) but I certainly wouldn’t call it intuitive. However, taking the stand that one is not going to learn it because it’s just not that important, that I can’t understand at all.

Tables have their place, for display of tabular data, but they were not intended to be a layout device.

7 comments

  1. Read your post in DesignNewz, and I have to agree with you about 90%. CSS in many ways the “better” solution.

    But let’s talk about broken CSS support in Browsers…

    While not exactly CSS’s fault, browsers are still having problems supporting simple floating sections. Padding and margin get messed up. One thing that is easy for tables (boxes that float to the left, and then down the row below) don’t work well with CSS – although they should! Why hasn’t CSS developed the concept of being able to float “relative” objects around “absolute” objects like HTML does with text flowing around images? I understand that “postition: absolute” is not in the document flow, but why isn’t there a “position: fixed” that acts like “postition: absolute” and interacts with the other “position: relative” or floating objects?

    Then there’s the problem of UL and OL lists having problems finding their proper left margins when horizontally across from a “float: left” or sometimes “float: right” object.

    I hate using tables generally for all the reasons you gave in your article. But they are mature, and mostly they work. I only wish I could say the same about CSS in most browsers today!

  2. You are absolutely right but CSS can’t really do decent layout if you don’t know the size of what in tables would be cells. In ideal design this is always the case because users may want to resize text.

    I think the rectalinear layout that tables give you regardless of content and window size is a real advantage. I wonder why CSS hasn’t given us an equivalent grid structure? We could then write the content easily and fluently then define where the cells were in the grid rather than in absolute position.

  3. Interesting subject. I can not imagine why someone would not use CSS. You are almost always going to use some kind of table here and there because sometimes you have to. Also in a lot of redesign situations you might not have the billable hours to create css from tables but in the end you have to learn it. There was a redesign I did recently for a customer. The shop who originally did it for them and this was not an old site (9 months old) had EVERYTHING embedded in the HTML code. It blew my mind because any updates were a nightmare. A fellow designer told me some shops do that on purpose so they can charge billable hours when these guys need simple updates?? That sounds really lame.

    Anyways good article and I honestly can not see how you would not use css?? Sounds like a designer to me.ha

  4. One simple problem with CSS is the fundamental box model. After years of understanding padding and margin to be something inside and outside a defined box, what the hell were they thinking of when they decided that the overall dimensions of a box changes and increases as you add padding, and margin. I mean…it even goes against the idea of a box used in printing.

  5. Schmo, I agree that the lack of support for what should be a super-simple element is frustrating and ridiculous. But there are a number of ways around that issue, and since there are fewer users of older IE browsers every day, the problem will, hopefully, just fade away eventually.

    Roger Johannson had a nice post about dealing with the issue a while back.

  6. The one that continues using tables is because it does not dominate or does not know CSS. To design in CSS is far better, by the subject of order, maintenance, accessibility, navigability and thousand reasons more.

Leave a Reply

Your email address will not be published. Required fields are marked *