Tables really are evil
Dave asks why tables are evil, demonstrating just how long it has been since he loaded Scripting News over a crappy dialup connection. Out here in the sticks, the 45.2 Kbps connection I’ve got right now is about average. I cleared my cache and loaded Dave’s page: 32 seconds. Not only would CSS make the total load time faster, since CSS is essentially function calls for HTML (rather than the calendar needing to repeat <td bgcolor=”#FFFFFF”><center><font size=”-2″ color=”black”>1</font></center></td> 31 times, you just need 31 <td class=”calDay”>1</td>s and one definition of calDay), but most importantly, it would show something, anything, right away.
The way table rendering works, the browser has to download the entire contents of a table and determine the size, before a single thing can be displayed. If, like SN, your entire page is wrapped in a table, then that means 32 seconds before the first word or image is displayed. I first threw out my tables when I was starting to use my remotely-hosted dotcomments hack to host comments on a free server: every time the comment server was down, the entire page would have to wait for the Javascript to time out on every single post, before anything would show. Dump the tables, and at least you display everything up to an unavailable remote resource, before you have to wait for it to time out. Something to think about, if you are pushing for including remote web services in the page.
Less important to the average blog producer, but massively important to me as a blog troubleshooter: tables, especially when every cell starts with a font tag and a presentation tag or two, are a massive PITA to read: nest your tables five or six deep, complete with tabs so that the actual text starts around character 80, and it takes me longer to find something in your source than it does to figure out what’s wrong with it.
stop it phil, you are making me cry :(
the people I work for decided they wanted a site redesign. about time as our website sucks major arse.
they wanted me to base it on a staff’s basic mock up that included about 12 nested tables *shudder*.
when asked how long I would take to get the entire site (100 plus) pages online and compatible with netscape 2 and up, and ie3 and up I said give me at least a month.
they balked and gave me a week. so I dont have time to redo the whole thing using css, and they dont care to listen to reasoning.
trying to tell administration that design doesnt work the way they want it to is like telling your cat not to attack that mouse.
I gave in. The site should be live next week and I refuse to put my name to it.
Phil you are so right. I have dropped my tables yesterday and my website loads so much faster ! It needs a bit of tuning though I can see, but it is the right way, away from tables to CSS!
not only do tables add to load times and somewhat indecipherable code, but mass use of the Box Model and other CSS elements cut load times dramatically and reduce the size of code and increase it’s human-readability. when i pushed my domain into it’s 4th iteration, i was astonished at my preparsed (before running through PHP and Greymatter) file size. it was and still is an all time low of 874bytes.
tell me just exactly what designer doesn’t love to write something and see that.
I’m getting sick of tables, and would really be interested in converting my website to CSS. But being a complete CSS newbie, every time I get started, I see something like this and get bogged down trying to make sure that my CSS statements are compatible with as many browsers as possible. Does anyone have advice on overcoming this problem? Maybe I should just give up on the 3.x and 4.x browsers, but I would like my site to be accessable to as many people as possible.
That’s a problem, indeed. My solution (helped by the fact that most of my readers are Blogger users, so I get 90%+ IE5/6), is to completely ignore 3.x, and IE4 (generally something that claims to be IE4 is actually a bot: the browser itself was too buggy to use, as I remember), and try not to be completely unreadable in NS4. Once you throw out the things in Eric’s list that you’ll never use (word-spacing? I’ve got better things to do with my time than control the word spacing), and ignore the 3.x columns, and look at the notes for the things you really need (margins are problematic for inline elements, where I rarely use margins, but less so for block elements), you get down to a tolerable number of problems: NS screws up float (so I hide it in a @import sheet), and IE5 has a broken box model (search for box model hack, and use it).
Also, it’s a lot easier to make the switch on a new page, where you aren’t already used to seeing 800 elements all precisely arranged. One of the side benefits of CSS layout is that you tend not to do those cluttered pages where the reader will ignore 80% of the stuff on the screen anyway, and by not being able to get things pixel-perfect, you don’t design pages that are perfect on a computer monitor using one of the resolutions you designed for, but unusable on another device or at another resolution.
Tables are an invention of hell. Frames are worse. Since I began using CSS way back in ’98, I’ve enjoyed it’s quirks on 4.0 browsers. Since I went completely CSS last year, I’ve turned my back on Tables and frames forever.