HTML & CSS
Article

Is ESPN returning to the nest?

By Alex Walker

Cast your mind back two and a half years — a generation in internet years. Table-based layout was still the king of the roost, but there was lots of discussion about CSS. What are the advantages? What is wrong with tables? Could it seriously be considered for real world layout?

Into that landscape strode ESPN — a shiny, commercially-savvy world-brand with a massive, diverse audience. They’d done the maths and decided that CSS layout was the go. As Mike Davidson (of sIFR fame) explained at the time, the new ESPN would be faster, lighter and forwards-compatible.

This was a bit of a watershed at the time. Sure, plenty of tech-orientated sites had shown it was possible, but this was probably the first time such a central online player catering to a ‘Joe Sixpack’ audience had said tables are not good for business. People really took notice and ESPN became poster boy for the Web standards movement.

So what happened there?

The de-styled ESPN website.

Here I’ve used Web Developer Toolbar to de-style and put borders on the tables of an average page. As Matt Grover (Resource Interactive) pointed out to me, it’s making quite extensive use of layout tables — 4 levels of nesting in fact.

Now, I’m not here to finger wag or tut-tut. They’re a big business and they make the decisions they see fit every day. I would, however, be interested to hear the rationale.

Obviously Mike moved on long ago, so it’s unlikely to be his direction-setting.

Is it:

  • a new policy designed to appease the complaints from Netscape 4/IE4/Opera 2/Mosaic users?
  • that CSS layout is no longer considered as important as it was?
  • that they find it difficult to hire CSS-savvy developers?
  • that they are unable to accomplish their design ideas without tables
  • that ESPN developers are now given free reign to get each page up in any way they see fit?
  • against official site philosophy, but coded by developers that don’t know better and not picked up by anyone else further up the chain?

Looking at the web.archive.org it appears to be something that has crept in over time. I’m guessing it’s something that has come with natural staff turnover but I’d certainly be interested to hear from someone ‘in the know’.

  • WarpNacelle

    On a huge site such as ESPN with major updates probably every hour, I’ll bet that whipping out a few tables may be the easiest way to get content up fast with minimal time spent on cross-browser debugging. Would be interesting to hear it from one of the horses mouths.

  • http://www.sitepoint.com AlexW

    On a huge site such as ESPN with major updates probably every hour, I’ll bet that whipping out a few tables may be the easiest way to get content up fast with minimal time spent on cross-browser debugging. Would be interesting to hear it from one of the horses mouths.

    That’s really only the case if you’re a ‘table-thinker’. For me (and most of us, I suspect), visualizing a layout in tables is no longer natural and takes some extra concentration.

    Likewise, I actually had to look up the correct syntax for frames recently because I honestly couldn’t remember the subtleties of using them — I simply hadn’t used or even looked hard at frames markup in 3-4 years.

    Reverting to table layout says to me that it’s the ‘natural language’ of your design methods.

    To go off on a tangent, this reminds me of a local legend — a guy called William Buckley escaped from a penal colony at Port Phillip heads in about 1800 and was graciously taken in by a local aboriginal tribe. The penal colony close down soon after and no European came near the area for another 30 years.

    In about 1831 the first European settlers moved into the area and eventually came across an older but still fit William Buckley, but who no longer spoke or even understood a single word of english.

    Use it of lose it, they say.

  • http://www.turtlereality.co.uk jont17

    Tables are easier and quicker to programme and they work more or less the same in all browsers. The problem with CSS is cross browser compatibility, if they all worked like firefox then life would be sweet, but we are still programming for ie 5.1 mac, which is not such a walk in the park. So I can understand how people can just slap a bit of tabling in for a quick fix and I think this will continue until we can kill off all the older browsers.

  • Mel81

    I tend to agree with Alex, tables only tend to be easier for the table coder, if you are used to using css for layouts and havn’t used tables for years then its a lot easier to just code a css layout. I tend to think what has happened is that they have hired new web developers over time and the new web developers are not used to coding in css so as time goes on the website slowly saw tables crepping back in to the layout.

  • http://www.deanclatworthy.com Dean C

    Tables are easier and quicker to programme and they work more or less the same in all browsers. The problem with CSS is cross browser compatibility, if they all worked like firefox then life would be sweet, but we are still programming for ie 5.1 mac, which is not such a walk in the park. So I can understand how people can just slap a bit of tabling in for a quick fix and I think this will continue until we can kill off all the older browsers.

    Had you said that 2 years ago. Fine. But we’re now in 2005 and so what if we have to mess around to get it to work in IE5? It’s hardly that much work anymore with all the excellent hacks out there. If you know CSS and how it works (granted I’m still learning), you can whip up something just as fast (if not faster) using CSS :)

  • lajkonik86

    well is always done very fast.
    With the problems with min-height hacks in opera, having to use 2 divs for padding, not slipping in any ie bug stuffies, problems with clear:both in firefox, well not really a problem but harder to work with.
    Wel it might just be me, but i think even paul comes up with faster then the correct css :P

    Still prefer CSS anytime, fast loading pages are nice :)

  • http://www.deronsizemore.com deronsizemore

    I’m with some others here. I by no means would consider myself a CSS expert, but I have not used a single table for over a year and I just can’t think in “tables” anymore. I never was that good with tables anyway and for me CSS seems easier. I guess it comes down to the way you think and I think in CSS not tables. I never could get the concept of all the nesting of tables. All of my older layouts turned out horrible with tables. I’m sticking with CSS even if there are some minor browser issues.

  • Kyle

    I’m guessing it’s a limitation of their inhouse content management system, and that they probably have some WYSIWYG editor parts of their site. It’s been my experience in commercial environments that CMS’s are very good for templated content pages, but that they don’t work well for one off pages.

    Sounds as though part of the original team has departed, and that they maybe don’t have the technical knowledge in house, or well documented.

    Just a hunch.

  • iMojo

    Plain and simple…
    Browser presentation and content layout should primarily be CSS but good old tables will most likely always have a use. A site such as ESPN displays tons of tabular data (think spreadsheet). Code for this type of content utilizing spans and divs only is much harder to edit and maintain. As a result developers still end up using table tags hence their creep into everyday use. Using valid table tag markup works fine so why not use it. For sectional content layout and style presentation then its CSS ofcourse.

    My 2 cents.

  • http://www.sitepoint.com AlexW

    A site such as ESPN displays tons of tabular data (think spreadsheet).

    I don’t think anyone has ever argued that tables should be removed from the HTML spec. In fact, tables are really the only correct way to be presenting information such as fixtures, player and game stats, and scores. They’re accurate and smart and their structure allows you to imply stuff about the relationships between the stuff it contains — i.e. all the items in ‘column 1‘ are surnames, and all the items in ‘row 1‘ relate to the same player. You can then use those interconnections to give the user more flexible and useful data.

    The most obvious example of this might be to do something like allowing the user to do ‘on-the-fly’ re-ordering and reshuffling of the data within a player stats table. That’s very difficult to do if you had layed those player stats out in DIVs, because the DIVs don’t imply any interrelationships, (unless you manually code them into it). Tables are good.

    Unfortunately, a glance at the above image tells you that they are not using the tables for anything more meaningful than positioning content. Any assumptions that you were to make about the relationships between items in the same column, or the same row, would be quite wrong, simply because there is no relationship there.

  • Ryan Behrman

    I think a lot of people are missing one of the major advantages of css over tables. That is, that css helps separate content from presentation. We are implementing this in our company and it means that the server side developers (e.g. ASP/PHP/JSP developers)can write code independently of the presentation. These developers work with simple DIV tags and the CSS designers then style these up.

  • wnYxXlYPKF

    tpVsr1og2fiYwv Wq3a4AzJ0Ocx aBHWNiZSsz

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.