Results 1 to 9 of 9
  1. #1
    2 Star Lounger
    Join Date
    Feb 2001
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table-less layout

    <SOAPBOX>

    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.

    </SOAPBOX>

  2. #2
    Silver Lounger
    Join Date
    Jan 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    1,862
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Table-less layout

    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 640x480 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 1024x768 or greater... but for now we don't have much of a choice. <img src=/S/boxedin.gif border=0 alt=boxedin width=25 height=20>

    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.

  3. #3
    2 Star Lounger
    Join Date
    Feb 2001
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Table-less layout

    <img src=/S/hello.gif border=0 alt=hello width=25 height=29>

    Take a look at http://www.alistapart.com/stories/tohell/. 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." <img src=/S/grin.gif border=0 alt=grin width=15 height=15>

    <img src=/S/cheers.gif border=0 alt=cheers width=30 height=16>

  4. #4
    5 Star Lounger
    Join Date
    Jul 2002
    Location
    Toronto, Ontario, Canada
    Posts
    1,139
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Table-less layout

    Mike,

    For the most part I agree with you.
    <hr>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.<hr>
    <big>But....</big>
    <img src=/S/ranton.gif border=0 alt=ranton width=66 height=37>
    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.
    <img src=/S/rantoff.gif border=0 alt=rantoff width=66 height=37>
    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 <img src=/S/sad.gif border=0 alt=sad width=15 height=15>, luckily for me, they forgot to remove IE from my Win2K box <img src=/S/evilgrin.gif border=0 alt=evilgrin width=15 height=15>

    <hr>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." <hr>
    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)
    --
    Bryan Carbonnell - Toronto <img src=/S/flags/Ontario.gif border=0 alt=Ontario width=30 height=18> <img src=/S/flags/Canada.gif border=0 alt=Canada width=30 height=18>
    Unfortunately common sense isn't so common!!
    Visit my website for useful Word, Excel and Access code, templates and Add-Ins

  5. #5
    KTYorke
    Guest

    Re: Table-less layout

    <img src=/S/pirate.gif border=0 alt=pirate width=22 height=18> <img src=/S/jollyroger.gif border=0 alt=jollyroger width=29 height=18>
    <hr>what only works on the 3rd Tuesday of the month if there is a full moon and it's foggy in Newark, NJ <hr>
    That's where I live! I'll post daily weather reports if you need them <img src=/S/wink.gif border=0 alt=wink width=15 height=15> <img src=/S/laugh.gif border=0 alt=laugh width=15 height=15>
    have fun

  6. #6
    5 Star Lounger
    Join Date
    Jul 2002
    Location
    Toronto, Ontario, Canada
    Posts
    1,139
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Table-less layout

    Thanks! <img src=/S/bow.gif border=0 alt=bow width=15 height=15> I'll keep that in mind when I'm haveing problems with my web sites <img src=/S/laugh.gif border=0 alt=laugh width=15 height=15>
    --
    Bryan Carbonnell - Toronto <img src=/S/flags/Ontario.gif border=0 alt=Ontario width=30 height=18> <img src=/S/flags/Canada.gif border=0 alt=Canada width=30 height=18>
    Unfortunately common sense isn't so common!!
    Visit my website for useful Word, Excel and Access code, templates and Add-Ins

  7. #7
    2 Star Lounger
    Join Date
    Feb 2001
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Table-less layout

    <img src=/S/hello.gif border=0 alt=hello width=25 height=29>

    "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.

    <img src=/S/2cents.gif border=0 alt=2cents width=15 height=15> <img src=/S/cheers.gif border=0 alt=cheers width=30 height=16>

  8. #8
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Table-less layout

    > 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 ([img]/forums/images/smilies/cool.gif[/img] 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.

  9. #9
    2 Star Lounger
    Join Date
    Feb 2001
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Table-less layout

    <img src=/S/hello.gif border=0 alt=hello width=25 height=29>

    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.

    <img src=/S/cheers.gif border=0 alt=cheers width=30 height=16>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •