At the Barnes&Noble the other day, I came across this Eric Meyer book on CSS and skimmed through it a bit. ‘turns out, there’s this great big controversy over laying out websites using CSS instead of tables.
I’ve been away from the “web development scene” a bit since I started my new job last May. I knew that CSS was da bomb y’all and it could do a lot of powerful things that nobody was using it for, but I just didn’t realize how much of a movement this has become.
I feel like a dinosaur. I’m an old school html hacker, using tables to do a stylesheet’s job. I’m inefficient, redundant, and out dated. Soon I’ll need to include special loser-denoting tabs in my html to tell the browser how lame and antiquated my web development skillz are (a la Doctype tags).
I’m not so convinced that I’m going about things incorrectly though. I basically agree with what this guy has to say.
This whole CSS vs Tables issue became even more relevant for me when I downloaded FireFox 1.0 and took a look at my site in that browser. The table cell on the right-hand side of the page was all scrunched-up-like. Even though I had code that looked like this…
<tr>
<td width=575></td>
<td width=175></td>
</tr>
…the right sidebar was only as wide as the longest word in the cell. I even did the trick where you put a 175 pixel-wide spacer image in the cell. This would make sure that the cell was “at least” 175 pixels wide, but it was often much wider. Actually, the biggest problem wasn’t that I couldn’t get the cell to be exactly 175 pixels wide. It was that the size of the cell seemed random. On some pages it was too narrow, on some it was too wide. I want one size, folks… 175 pixels like the code says. How comes IE can get this concept, bug FireFox can�t?
So I googled the problem. And I wasn’t too excited when the first couple of sites that came up gave the answer of “just switch to an all CSS layout and this problem will go away.” Nah, I didn’t buy it. I want a table cell 175 pixels wide. There’s got to be a way for me to tell the browser that. I put “width: 175px” all over the place in my stylesheet, but no change.
I searched some more. After about 30 minutes, I found a real explanation of what was going on. You can read into it more at this w3 site. In general, the problem is in the table rendering method. IE calculates every cells size before rendering a table. FireFox, on the other hand, looks at the just the first row and estimates the rest. The result is that FireFox renders tables much faster since they don’t need to wait for the entire table to load before writing data to the screen. However, FireFox also drops the ball by not noticing things like “width=175” in a cell on the third row.
There is a “fix” though… at least for my site. CSS has a “table-layout” attribute. To the main table class, I added the following CSS code “table-layout: fixed”. This didn’t turn FireFox into IE or anything, but it at least let me know that both IE and FireFox would render the table in the same way. Specifically, according to these rules (from the earlier w3 link):
- A column element with a value other than ‘auto’ for the ‘width’ property sets the width for that column.
- Otherwise, a cell in the first row with a value other than ‘auto’ for the ‘width’ property sets the width for that column. If the cell spans more than one column, the width is divided over the columns.
- Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).
Now in both IE and FireFox, my website looked the same though still “wrong”. The left section of my third row now took up 50% of the table and the right side took up the remaining 50%. The size of the page “columns” is based on just the first row. Since my first row contains just one cell, my table looked like a one-column table. When the third row was rendered, it was just split in half. The width of the third row had been “divided over the columns”. To fix this, I setup a dummy first row with my wanted division. I added to the top of my table the following row:
<tr height='1'> <td width='575' height='1'></td> <td width='175' height='1'></td> </tr>
Now I have a two-column table. When the render-er gets to my fourth row now it splits it up like it did the first row (575 … 175). And the result is what you now see on my site: the requested table division with an added 3 pixels of gray at the top. It’s possible that adding this row would fix the problem without altering the table-layout attribute in CSS. But like I said before, it’s good to know which algorithm your browser is using to render tables rather then leaving it up to whim.
I hope this can help anyone else out there with a similar problem. Now back to the original topic… I like CSS and all, but I hope people don’t go too overboard with this thing. If it ain’t (that) broke, don’t use some other broke-ass piece of technology to get it done.