When it Comes to Tables, CSS can Kiss My Patootie
I’ve been working on restructuring another web page, one apart from Irregular Times, for the past twelve hours or so. Most of that work has been graphic in nature: coming up with a new color scheme, bringing together images, stuff like that. But a fair chunk of the work has been in coding, and while working with some CSS to change the style of that web page, I needed to look up some information in a reference book by Richard Mansfield called CSS for Dummies. In that book, I ran across the following claim:
For years, the dream of many Web page designers has been to find some way to avoid relying on the extensive, bloated code required to lay out a Web page using tables and spacer images. CSS positioning brought us much closer to that elusive goal… Your code (markup) is much “lighter” (less verbose and complex), making it easier to read and maintain.
Mansfield tries to explain on the next 15 pages why CSS is simpler and “lighter” than an old HTML table. If you have to take 15 pages to explain something like that in a Dummies book, it’s a bad sign. Mansfield gives two examples of “lighter” CSS coding that is not as “complex” as an old HTML table. But the problem is that his CSS coding isn’t lighter, and it’s more complex. In his first CSS example, Mansfield takes 994 characters (not including spaces) to create a text layout. Using the same text but using HTML tables for layout, I used just 503 characters. In his second CSS example, Mansfield takes 1,285 characters (again, not including spaces) to create a layout for text, a task that HTML tables accomplish in just 698. In both cases, HTML is lighter than CSS.
“Wait a minute,” some of you coders might be objecting. “You’re being unfair. Part of the CSS coding in a web page will go into a single style sheet that will be read once by a browser. The rest of the code goes into a particular web page and is smaller.” That could be true (although in his example, the CSS is contained within a single web page). But let’s take out the part that might sit in a style sheet. Even then, in that first example in the paragraph above the CSS uses 546 characters (not including spaces)… still more than the simple HTML with tables uses.
What about Mansfield’s “simplicity” and “easier to read” contention about CSS code compared to an HTML table? Well, can you tell me what this bit of “simple” CSS code written by Mansfield means, at least without having had to take a whole CSS course first?
font: 24px/.99 “Arial”; letter-spacing: -.06em;
There are at least a dozen syntactic and procedural pieces of information you have to be aware of to figure out what that CSS code is going to do. Compare that to an HTML table:
‹tr›‹td›This is cell 1.‹/td›‹td›This is cell 2.‹/td›‹/tr›
‹tr›‹td›This is cell 3.‹/td›‹td›This is cell 4.‹/td›‹/tr›
All I have to tell you is this:
1. Text inside Lesser-than and Greater-than symbols is a table command.
2. A slash in a command finishes an earlier command that looks like it.
3. The command “table” starts a table.
4. The command “tr” starts a row of a table.
5. The command “td” stars a column within a row of a table.
The html table is conceptually simpler, and it’s easier to read. For that reason, it’s also harder to screw up than CSS. Don’t believe me? Check this out: it’s a screen capture of a bootleg copy of one of the pages I was talking about from of Richard Mansfield’s CSS Design for Dummies book:
The bootleg was made by Chicago Web Design, which judging by its name should know how to get a web page to look right. But the bootlegged page from Mansfield is all mixed up in its formatting, with odd lines going where they shouldn’t be. Another one of Chicago Web Design’s bootlegged pages is only partially illegible. Why? Because the web designers didn’t get their CSS right! Oh, the irony is thicker than a stack of CSS stylesheets!
Mansfield isn’t the only one with this really weird axe to grind against HTML tables. Take Bill Merikallio and Adam Pratt, who feel strongly enough about the subject to entitle their Seybold seminar “Why tables for layout is stupid.” Merikallio and Pratt begin with the notion that HTML tables shouldn’t be used to layout text because “Tables existed in HTML for one reason: To display tabular data.” Well, I have news for them. Do they know that the letter “A” existed originally for one reason: to represent an ox’s head? Please, for their emotional health don’t let anyone tell them that it used to be against the rules to sell things over the Internet! The use of information technologies changes over time, and that’s OK.
Merikallio and Pratt’s bigger complaint:
The problem with using tables:
* mixes presentational data in with your content.
o This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit.
o Bandwidth ain’t free.
In an example, the pair proclaim of a 17×9 table, “Guess how much markup there is in this little table? 13.7k.” Wowsers! Next to that is example the authors put a piece of clip art to be funny. Guess how much space is taken up by that piece of clip art? 23.3k. Wowsie wowie woo woo! Merikallio and Pratt used around twenty of those images on their one web page. They don’t seem too worked up about the size of their own web page. Why are they so worked up about the small bandwidth difference made by html tables?
Here’s the part where I need to add my caveat: I’m a user of CSS myself, in this blogging application, in database work, and in a few other places. I agree that CSS can be useful, especially when a lot of web pages need to be styled in the same way and might need to be changed all at once. That’s great. But can we not get into silly stretchy games meant to demonstrate that CSS is simpler, easier, and more legible than a basic ol’ html table? Unless you’re the type who wakes up to a binary alarm clock, CSS does not provide a better way to layout text in the way that an html table does. CSS is great for really complicated design. Tables are great for simple, straightforward (dare I say legible?) layout. And that’s OK. Relax. It’s all OK. Kumbaya.