26

I remember looking at some SO source markup months ago, and it was basically <div> heaven. The pure CSS zealots would've loved it. But today I look and see...

<DIV id="question" class="">
    <TABLE>
    <TBODY><TR>
    <TD class="votecell">

<DIV class="vote">
    <INPUT type="hidden" value="288968">
    <IMG class="vote-up" src="./so_files/vote-arrow-up.png" width="40" height="25" alt="vote up" title="This question is useful and clear (click again to undo)">
    <SPAN class="vote-count-post">6</SPAN>
    <IMG class="vote-down" src="./so_files/vote-arrow-down.png" width="40" height="25" alt="vote down" title="This question is unclear or not useful (click again to undo)">
    <BR>
    <IMG class="vote-favorite" src="./so_files/vote-favorite-off.png" width="32" height="31" alt="star" title="This is a favorite question (click again to undo)">
    <DIV class="favoritecount"><B>2<BR></B></DIV>
</DIV>
    </TD>
    <TD>
        <DIV>          
            <DIV class="post-text">

Now this doesn't bother me (I'm a pragmatist) but I'm curious... is this something new? Why the change? Did you have issues using floats for this? If so, what?

Edit: Hey it gets better. The tables are nested. Now watch some heads explode. :)

Improve this question
6
  • 19
    ugh, SO really should do better...
    – bananakata
    Commented Jul 7, 2009 at 11:04
  • I'd like to see an response on this as there are implications for both methods. I do have to agree with annakata though. It's a Brave New Web now that even Microsoft is trying to support standards.
    – Rob Allen
    Commented Jul 7, 2009 at 13:13
  • 11
    I'd like to ask a related, but far more important question: why doesn't SO use 1-pixel transparent GIFs for layout? And where are the animated flames and red script text on a black background?
    – Hilarious Comedy Pesto
    Commented Jul 7, 2009 at 16:28
  • 4
    Because zazzle.com/css_is_awesome_mug-168716435071981928
    – macbirdie
    Commented Jul 7, 2009 at 16:38
  • 1
    meh. Rather more alarmingly, it fails validation for what appears to be mismatched tags (and a missing alt) validator.w3.org/…
    – Macha
    Commented Aug 2, 2009 at 23:27
  • @Macha: that whole business of requiring alt was quite misguided; better no alt than a bad alt: UAs can do better than a bad alt, but they don't know how to tell if an alt is bad. Of course, it is important to use alt="" for images that convey no additional information, or the page will be littered with useless junk as rendered by non-graphical UAs, such as links or screen readers. (Or, heck, even by graphical UAs with images turned off!)
    – SamB
    Commented May 25, 2011 at 17:45

8 Answers 8

Reset to default
38

I hope they did it just to make some heads explode, honestly. The holy war between tables and divs is one of the most annoying arguments in all of IT.

Improve this answer
16
  • 5
    To me, it's the hipster version of emacs vs vi. Mainly because I immediately associate web design with hipsters.
    – Eric
    Commented Jul 7, 2009 at 11:28
  • Hipsters? What is this, the 1950s?
    – nb69307
    Commented Jul 7, 2009 at 11:33
  • 1
    Punks vs. Mods! Cafe racing is making a comeback!
    – TheTXI
    Commented Jul 7, 2009 at 11:36
  • In the UK at least, it was Mods v Rockers.
    – nb69307
    Commented Jul 7, 2009 at 11:39
  • Neil: Thank you for correcting me. You are right but I couldn't quite remember the name of the Rockers :)
    – TheTXI
    Commented Jul 7, 2009 at 11:40
  • Mods & Rockers - 1950s and early 60s. Punks - late 70s and early 80s
    – ChrisF Mod
    Commented Jul 7, 2009 at 11:43
  • 8
    It's nothing like emacs/vi or mods/rockers - there's a definitvely correct position, and there's a pragmatic (imho lazy) opinion that a developer does not need to meet that.
    – bananakata
    Commented Jul 7, 2009 at 11:55
  • 11
    This isn't butter-side-up versus butter-side-down. It's Standard-compliant versus easy-mode/status quo.
    – Rob Allen
    Commented Jul 7, 2009 at 13:16
  • 3
    the holy war rages on
    – TheTXI
    Commented Jul 7, 2009 at 14:32
  • 2
    Rob Allen> Tables are part of the html standard aren't they? It might not be considered good semantic markup, but it is standards compliant
    – U62
    Commented Jul 7, 2009 at 15:36
  • 7
    @U62 - Yes, tables are allowed in standard based mark-up, but not for layout purposes. It's harsh on mobile and non-graphical browsers and the default settings for tables prevent them from displaying anything on-screen until all of their data is ready which makes page refreshes feel clunkier.
    – Rob Allen
    Commented Jul 7, 2009 at 15:44
  • 3
    @Rob Allen: For when you really need to answer that last SO question on your iPhone during the commute home from work?
    – Welbog
    Commented Jul 7, 2009 at 16:25
  • 1
    @Welbog - My Blackberry actually. I'd like an iPhone but can't make the switch to AT&T yet.
    – Rob Allen
    Commented Jul 7, 2009 at 18:09
  • I find it ironic that every single up vote I have ever received on this answer has been when I am at my rep limit.
    – TheTXI
    Commented Jul 8, 2009 at 3:57
  • 1
    @annakata You know, there is a definitively correct position on the vi/emacs debate too. :wq
    – user3788
    Commented Jul 8, 2009 at 21:26
23

As someone who has struggled mightily to get divs to behave the way I want them to, I give props to the SO UI designers for having the balls to use tables.

Improve this answer
4
  • 5
    Seriously? It's admitting defeat, no matter how you cut it, and I have a hard time "giving props" to someone for intellectual cowardice/laziness, which is how I see it. But then, I'm a zealot.
    – bananakata
    Commented Jul 7, 2009 at 15:37
  • 23
    @annakata: Give me a widely implemented standard that allows me to easily align screen elements horizontally and vertically easily without having to sacrifice dynamic widths and will use it. Until that standard comes, stop asking developers to not use the best tools available to them.
    – Welbog
    Commented Jul 7, 2009 at 16:29
  • 1
    I was about to say something really bad about annakata, but the portal avatar stopped me.
    – user1228
    Commented Jul 7, 2009 at 17:02
  • 1
    I think there's more interesting and some might say important issues in the world to be a zealot about than HTML tables. Unless of course you are actually blind/visually impaired and your screen reader doesn't like it.
    – Chris S
    Commented Jul 8, 2009 at 13:48
9

Use of tables depends on how far you want to take the "tabular data" notion. The table on this page separates the upvotes from the writter answer. That's tabular data in my eyes. You could just as easily display a boring table like this:

VOTES      | ANSWER
=================================
15         | I hate tables
---------------------------------
-50        | I love tables
---------------------------------

Stack Overflow just presents it nicely :)

Improve this answer
8

While I prefer to use CSS layout where possible, but try to be pragmatic about it.

The one real bugbear for which I almost always use tables is laying out forms. To do a simple form like:

Label    Input
Label    Input
Label    Input
         Submit

Is just hellish with CSS. You have to know the widths each column will need, and stick in work-arounds for different browsers. If you change the text in a label, then you have to go back and revisit the CSS to get the width right again, and that's assuming everyone uses the same size/font you do. And you have to go through this for every form. Total PITA.

Plonking it into a table, it just lays out the way you want, and the columns size appropriately for everything to fit. A lot less headaches.

Improve this answer
1
  • 1
    Forms are tabular data. Labels are the 'headings', while the fields are the 'data'.
    – DisgruntledGoat
    Commented Jul 25, 2009 at 20:25
5

I much prefer sticking to a semantic layout where possible. That means using the div tag sparingly as well. It has a specific purpose (creating a logical division) just like table.

That said, there's nothing wrong with using a table for layout here and there, as long it's done very sparingly, isn't your default layout tool, and the overall structure of the site is apparent from the semantics.

Improve this answer
2
  • 6
    I disagree. There is something wrong with using tables for layouts - always, without exception. The only thing I would add is that I wouldn't get worked up over the way SO used them. Minimal is far better than what we see on the web elsewhere.
    – Sampson
    Commented Jul 7, 2009 at 14:30
  • Unless you're displaying tabular data :)
    – Chris S
    Commented Jul 8, 2009 at 13:49
4

For those interested to see where the tables are. Check out this image. It's the same grid as with the questions.

Improve this answer
2
  • 2
    Link not working.
    – brabec
    Commented Jul 30, 2014 at 19:27
  • 2
    Perfect example of why answers should stand on their own. This post is totally useless now.
    – Lightness Races in Orbit
    Commented Nov 22, 2016 at 23:10
4

I couldn't agree with you more. Tables are inherently worse - an HTML parser wading through nested DIV tags and cascading styles with different per-browser hacks is obviously way better than wading through nested TD tags. /troll, ducks

Improve this answer
1

They should use whatever works for them, I suppose. Maybe they realised that with pure divs, maintaining and adding things were a nightmare :)

Maybe it also means, there is not going to be a mobile version of SO any time soon?

Improve this answer
1
  • 3
    Or may be there are no web designers on the core SO team. /hides
    – perbert
    Commented Jul 28, 2009 at 16:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .