Table-less layout

Topic

New Reply

Many web designers rely on tables for their layout of their web pages. I’ve recently run across some articles that suggest that technically tables are for tabular data not for layout. These articles suggest that you should be able to do most of the same things using CSS. The benefits of doing it this way is much cleaner HTML/XHTML, ease of porting your web page for use in Palms, Pocket PC’s, Cellphones, …

As an experiment, I decided to try it. I used to publish a project status report for my group once a week. It was done in MS Word, then saved as HTML. It relied heavily on tables. I rewrote the status report using just XHTML and CSS. Although I haven’t been able to copy the exact look of the prior HTML status report, it looks pretty good and is much cleaner. The old report was aound 90K, the new one with the same amount of information is about 9K.

I’d encourage web designers to at least try table-less layout and lean more on CSS.

Reply | Quote

Replies

Hi Mike,

I agree completely with you: Any technique that produces cleaner code and the same (or similar) output is worth a try.

The only problem with this is that those of us designing/developing web pages for the masses have to consider the wide variety of browser versions (and screen resolutions) out there. Believe it or not, there are still some folks using generation 3 browsers (Netscape and IE). Those browsers don’t support CSS or DHTML. And probably some of the same folks are still using 640×480 screen resolutions! (Granted, it’s probably a small percentage – between 3 and 5% in my mind.)

When I do have the opportunity to design content for a captive audience (such as inside a company), I do like to take advantage of using CSS and other “newer” techniques in my design.

Maybe in an ideal world everyone will all have the newest and best browser along with a screen resolution of 1024×768 or greater… but for now we don’t have much of a choice.

P.S. The original 90K report was probably generated by Word, which is notorious for including a ton of ambiguous code. I’ll bet you could present the same report with tables (done by hand) and still come in under the 20K mark.

Reply | Quote

Take a look at http://www.alistapart.com/stories/tohell/%5B/url%5D. In a nutshell, it says, now that the newer browsers support web standards, it’s time for web designers to start coding to those web standards and get those running non-standards compliant browsers to upgrade sooner.

Although I’m still getting my feet wet with CSS, I suspect that you would still have enough control to scale to different screen sizes. (Percentage of browser window… that sort of thing.)

“P.S. The original 90K report was probably generated by Word, which is notorious for including a ton of ambiguous code. I’ll bet you could present the same report with tables (done by hand) and still come in under the 20K mark.”

I would agree that it’d probably come in around the 20K mark. Most MS apps that generate HTML, generate bloated HTML. As I mentioned, I was striving for a table-less layout since tables are technically for tabular data.

I’ll admit that comprimises need to be made, but we need to evolve to using the newer technologies. We need to stop bending over backward for those few who aren’t using at least 5.0 browsers. Some guy with pointy ears once said, “The needs of the many outweigh the needs of the few or the one.”

Reply | Quote

Mike,

For the most part I agree with you.
[indent]

---

In a nutshell, it says, now that the newer browsers support web standards, it’s time for web designers to start coding to those web standards and get those running non-standards compliant browsers to upgrade sooner.

---

[/indent] But….

The BIG problem I have with this is, it is not always possible for the user to upgrade. At work I HAVE TO USE Netscape 4.7 not even 4.79, but 4.7. It’s corp standard and I have no choice in the matter. I have a P4 1.5GHz on my desktop with Win2K, so it’s not a case of lack of power.

There are still users that only use Lynx browser (a text only browser) because they work on Unix boxes.

I’m not saying to avoid using CSS and DHTML and newer standards, but to keep in mind that some users, no matter how much they want to, can’t upgrade their browsers.

I use CSS on the sites I work on, but I also make sure that it will work in 3.x version browsers as well.

Since you are starting to get into CSS, Check out the Master Compatibility Chart By Eric A. Meyer. He has tested CSS compatability in multitudes of browsers. It lists what works, what does’t, what only works on the 3rd Tuedsay of the month if there is a full moon and it’s foggy in Newark, NJ (the quirky implementations).

You’ll notice if you look at the table, in my browser at work, life sucks for me with sites that use CSS , luckily for me, they forgot to remove IE from my Win2K box

[indent]

---

We need to stop bending over backward for those few who aren’t using at least 5.0 browsers. Some guy with pointy ears once said, “The needs of the many outweigh the needs of the few or the one.”

---

[/indent]Which goes COMPLETELY against the original intent of the ‘Net. IMHO, this is one of the reasons the ‘Net isn’t what it once was. (no offence intended, just my personal viewpoint)

Reply | Quote

“At work I HAVE TO USE Netscape 4.7 not even 4.79, but 4.7. It’s corp standard and I have no choice in the matter”

You might want to contact your I.T. dept and discuss it with them. Backed with some justification might help the case. Maybe it’s time to change the corp standard.

“There are still users that only use Lynx browser (a text only browser) because they work on Unix boxes.”

I suspect that XHTML/HTML & CSS renders better than tables & HTML with images using Lynx. The content is mostly seperate from the presentation using XHTML/HTML & CSS, so it should be easier to read on Lynx. There are other browsers available for Unix boxes too. If you are worried about Lynx browsers, you should be more concerned about those with vision disabilities. Table heavy web pages don’t help them any.

“——————————————————————————–
We need to stop bending over backward for those few who aren’t using at least 5.0 browsers. Some guy with pointy ears once said, “The needs of the many outweigh the needs of the few or the one.”
——————————————————————————–

Which goes COMPLETELY against the original intent of the ‘Net. IMHO, this is one of the reasons the ‘Net isn’t what it once was. (no offence intended, just my personal viewpoint)”

The original intent of the internet was poisoned by the “tag wars” between MS and Netscape. It’s time to get back on track and clean up the pollution and use browsers that follow the standards and design web pages that follow those standards.

Reply | Quote

> I’ll admit that comprimises need to be made, but we need to evolve to using the newer technologies.
> We need to stop bending over backward for those few who aren’t using at least 5.0 browsers.

It is very frustrating trying to code JavaScript for multiple Document Object Models. It is easiest, surely, to require Internet Explorer 4.x or higher, than to try to also write W3C compliant code for NS6+ or deal with layers in NS4. I wish there were a cookbook showing how to write it in self-enhancing format so that it “works” okay with less capable browsers but has enhanced features or appearance in more capable browsers. One can sniff, and there are scripts for that, but developing a philosophy of design that makes it actually work seems pretty tough.

Most of the pages I develop are either (A) for our Intranet, in which case they are very basic or I can demand IE when I feel lazy, or ( for our Firm’s web site, which we assume will be visited primarily by corporate clients and VCs on high band connections with updated PCs, or by entrepreneurs between opportunities on high-end home PCs/laptops. Maybe not the best assumptions, but if someone won’t spring for a new PC after 5 years, or a fast enough connection to download an updated browser, they may not be a good candidate for the kinds of prices charged by law firms… I don’t want to sound like I don’t have community spirit, but it seems like a classic case of “diminishing returns.” I am more sensitive to the problem of accessibility, but I don’t have a solution.

Afterthought: (2 hours later) That site, A List Apart, is astounding, and Zeldman’s writing is terrific. Despite the recent spate of unexplained browser shut-downs caused by Microsoft’s attempts to implement print-specific style sheets for the MSKB, I am somewhat inspired to experiment with that. Frankly, I’m not sure I can convert the multiple-column layout o four site using CSS, but I’ll give it a shot when I get a free afternoon. Thanks for the link.

Reply | Quote

I really like A List Apart. After preaching about how wonderful XHTML & CSS were, they followed through on converting their web site to XHTML & CSS. There’s even an article on the journey to XHTML & CSS. Granted, there was some pain and comprimises involved, but the end result appears to be worth it.

Reply | Quote

Thanks! I’ll keep that in mind when I’m haveing problems with my web sites

Reply | Quote