SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 73

Thread: Tables vs CSS

  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tables vs CSS

    What are the real benefits with css over tables?

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS and tables are completely different. CSS is a way of styling all HTML elements, including tables. I suspect your question is more like "what are the real benefits with divs over tables".

    In actual fact, tables are for tabulated data and the W3C came up with divs for laying out pages. That is their purpose. So the answer is really that you shouldn't be using tables for page layout (although everyone, including myself does). You should be using divs and reserving tables for displaying tabulated data.

    You can get the same effect with CSS positioned divs that you get with tables, but depending on your design, it can be more tricky.

    If you search SitePoint there is really quite a lot of discussion about this already...


  3. #3
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by greg.harvey
    ....So the answer is really that you shouldn't be using tables for page layout (although everyone, including myself does)....
    I just spent over 500 hours in 8 weeks, converting my entire site to XHTML with CSS layout. It no longer uses any tables at all for page layout.

    The benefits are numerous. Each page used to load ~80K of presentational images and spacer gifs. Now each page has ~8K of presentation images. Each page used to contain presentational tables-within-tables whose code was hard to understand, nearly impossible to edit, loaded very slowly, and guaranteed that my pages were not accessible to people with disabilities. Now, every page contains only easy-to-follow, easy-to-edit XHTML code that loads like greased lightning and can be read by any browser on any Internet-capable device. Now, all of my pages' layout is handled by CSS, which means that, from now on, I can completely change the layout, colors, fonts, sizes, borders, etc. of every page almost instantly, just by editing a few lines in my main stylesheet. And my print stylesheet automatically removes my logo and navigation area, changes the sizes of my fonts, and puts a dashed border around my page footer, each time a page is printed.

    Throughout my entire 2xx-page site, there are now only a handful of tables, and they are used only to display tabular data, which is what they're "supposed to be used for," according to the W3C.

    If you visit my home page, you can see how quickly it loads. In the bottom entry of my blog on that page, there's a link to my previous home page. Click on that and see how long it takes to load. If you're really brave, view the source of my previous home page, and see if you can figure out how to move something from one place to another without messing up the entire page.

    I could go on and on, but you'll discover more and more benefits of CSS layout as you learn more about it. I HIGHLY recommend that you read Jeffrey Zeldman's book, "Designing With Web Standards," available through Amazon.com. In fact, I just finished writing a review of it for my site at 2:00 this morning.
    Last edited by ComputerBob; Oct 18, 2003 at 07:31.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  4. #4
    SitePoint Enthusiast DiDoKa's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    benefits

    @ComputerBob : Wow, look at you

    My two cents:
    I converted my website from html 4.01 transitional to xhtml 1.0 strict in June of this year. Bob already explained some of the benefits. No only did i kick out 75% of unneccessary code, which makes the site load a lot faster, nooo, it works in mobile devices, information is still accessable using really old, slow, buggy antique-browser and I tested it using http://www.browsercam.com in all browsers and on all common platforms and woohooo, it works just as expected.

    It saved me a ton of work and continues to save me a ton of time and work. I update my website at least ones a month and the process is a matter of a couple of minutes. I can redesign this website changing one file (the css file) which is a huge plus, since i tend to get tired of the same old same old quickly. CSS Layouts are recycable, in no time you have a completely different looking website.

    The main benefit is, that i am not leaving anyone out. The braille reader has no problem reading my site, the mobile device has no problem with it either. I am reaching more users then ever, my webstats say so.

  5. #5
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd just like to make the point (and I am *not* condoning using tables for page layout... I've already said you shouldn't) that tables can be perfectly accessible if the mark-up is correct.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Mauritius
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look at this page:

    The Mother of all Table Talks

  7. #7
    because you gotta have beer! firegryphon3207's Avatar
    Join Date
    Apr 2000
    Location
    Roxbury/Boston
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by snaip
    Have a look at this page:

    The Mother of all Table Talks
    How come sitepoint isn't in that list?? Going to have to offer it as a possibility.
    Alone we can do so little; together we can do so much.
    -----------------------------------------------------
    tinyplanet.org <--a nifty spot.

  8. #8
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by greg.harvey
    I'd just like to make the point (and I am *not* condoning using tables for page layout... I've already said you shouldn't) that tables can be perfectly accessible if the mark-up is correct.
    Simple tables can be perfectly accessible, but from what I've read, heavily nested cannot be perfectly accessible.

    And, even if adding accessibility markup to them could help them meet automated accessibility validation standards, nested tables for page layout, with all of their opening and closing of tables and cells and rows and columns before any content or navigation is presented, would still torture those who use textreaders to access Web sites.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  9. #9
    SitePoint Evangelist Backlinker1's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    462
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, this isn't my string but you have totally convinced me that I have to learn this CSS stuff.
    Graham
    Regards. Graham
    Buy, Sell, Talk And Learn About Antique British Ceramics.
    Abcir.org -
    Ceramtique.com - AbcirGroupForums.co.uk

  10. #10
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ComputerBob
    Simple tables can be perfectly accessible, but from what I've read, heavily nested cannot be perfectly accessible.
    I agree. Heavily nested tables are a pain for the partially sighted, but there are ways around that. Properly labeling rows and columns so they know where they are. Having an index of access keys easily available at a key-stroke, etc.

    For example, you could have a div at the very top of the page that says "Press ALT+A followed by enter at any time to access our accessible menu." First thing a screen reading browser comes to. Then have that access key go to a list of all the key elements and the appropriate access key. All of a sudden that tabled site is easier to use than a normal div site.

    Anyway, like I say, I personally think that you should use divs. I'm merely playing devils advocate here. My point is that to sweep all tabled layout sites away as 'inaccessible' is wrong.

  11. #11
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ComputerBob
    And, even if adding accessibility markup to them could help them meet automated accessibility validation standards, nested tables for page layout, with all of their opening and closing of tables and cells and rows and columns before any content or navigation is presented, would still torture those who use textreaders to access Web sites.
    That's not exactly accurate. Consider this following table layout:
    Code:
    <table summary="">
    <tr>
    <td colspan="2">
    Header
    </td>
    </tr>
    <tr>
    <td>Navigation, with skip nav link</td>
    <td>Content</td>
    </tr>
    <tr>
    <td colspan="2">footer</td>
    </tr>
    </table>
    It makes sense when linearized, right? Read it in Lynx and it looks like most other CSS sites in text-only mode. That's a good use of layout tables and an impaired person can use it just fine. I don't recommend the complex nesting, but using tables for layout doesn't hinder your site's accessibility. Poor coding does.

  12. #12
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Melbourne, Australia
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've always used nested tables. Sure,some of my pages are complex, I use <-- blah blah --> often so anyone can see at a glance the layout and content of the page when reading the html

  13. #13
    because you gotta have beer! firegryphon3207's Avatar
    Join Date
    Apr 2000
    Location
    Roxbury/Boston
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jim Toal
    I've always used nested tables. Sure,some of my pages are complex, I use <-- blah blah --> often so anyone can see at a glance the layout and content of the page when reading the html
    But then the casual surfer who must use a screen reader cannot read your site. And is that fair to them if you have the means available to you to allow them to read it?
    Alone we can do so little; together we can do so much.
    -----------------------------------------------------
    tinyplanet.org <--a nifty spot.

  14. #14
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    I'm kinda new to the whole accessibility issue, from what i read so far.. are you saying html coding needs to be easy to read from people viewing your source code?

    I'm kinda tired now so my question might not have came out right.

  15. #15
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. But it needs to be easy for pseudo-intelligent screen reading software to read your code and find the relevant bits to read out.

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think CSS is the way to go as well but this whole ethical debate that is trying to equate using tables to not providing wheelchair access is absurd.

  17. #17
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TigerFan
    I think CSS is the way to go as well but this whole ethical debate that is trying to equate using tables to not providing wheelchair access is absurd.
    It's easy to jump in and ridicule others, but it would be more helpful to the discussion if you would elaborate on what you think is "absurd" about wanting to make Web sites accessible to everyone.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  18. #18
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ComputerBob
    It's easy to jump in and ridicule others, but it would be more helpful to the discussion if you would elaborate on what you think is "absurd" about wanting to make Web sites accessible to everyone.
    Actually, TigerFan is right. Tableless layout != Accessible!

    As proof, I offer up these examples:
    TABLELESS:
    HTML Code:
    <div>
    <div><big>Hello!</big></div>
    <span style="font-weight: bold;">This is bold text, but only on screen</span>
    </div>
    TABLES:
    HTML Code:
    <table summary="">
    <tr>
      <td>
          <h1>Hello!</h1>
          <p><strong>This is bold on screen and has emphasis to screen readers, as well as search engines</strong></p>
      </td>
    </tr>
    </table>
    Which page would be more accessible? In this case, it's the page that uses a simple layout table. Granted, I oversimplified, but here's my point: CSS alone does not equal accessibility. Proper coding and knowledge helps make you accessible. CSS can help, but only if you use it correctly.

  19. #19
    Free your mind Toly's Avatar
    Join Date
    Sep 2001
    Location
    Panama
    Posts
    2,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ComputerBob
    Each page used to contain presentational tables-within-tables whose code was hard to understand, nearly impossible to edit, loaded very slowly, and guaranteed that my pages were not accessible to people with disabilities.
    AFAIK, every browser supports tables and probably wouldn't be much of a browser if it didn't. If that's what you mean by "people with disabilities". In fact, I think there are some browsers out there that have problems displaying pages made in complete CSS.
    Community Guidelines | Community FAQ

    "He that is kind is free, though he is a slave;
    he that is evil is a slave, though he be a king." - St. Augustine

  20. #20
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent point, Vinnie! (And Toly...)

  21. #21
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vinnie,

    I have to strongly disagree with your last post.

    First of all, nobody has ever claimed that Tableless Layout = Accessible, so it was a straw man argument when you proclaimed that Tableless Layout != Accessible.

    Of course Tableless Layout != Accessible. Anyone who has any knowledge of the subject already knows that.

    By that same logic, let's all agree that Table Layout != Accessible, too, so we can get beyond spurious arguments and discuss the real issues here.

    Second of all, you and I both know that the CSS example that you gave used very inefficient coding that could be significantly reduced with the use of an external stylesheet. I could just as easily rig up a table example that is even more inefficient and even less accessible than the CSS example that you gave. That wouldn't prove anything, and neither do your examples. The use of tables and the use of tableless layout are both methods that we can use -- neither is intrinsically accessible "out of the box."

    Third of all, your post states, "TigerFan is right. Tableless layout != Accessible!" Unless you're referring to some other thread, you're putting some words in TigerFan's mouth to conclude that his/her post made that statement.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  22. #22
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think Vinnie meant "not necessarily" rather than an out and out "not". He just phrased it in a way that could lead to confusion. We know what he meant.

  23. #23
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Toly
    AFAIK, every browser supports tables and probably wouldn't be much of a browser if it didn't. If that's what you mean by "people with disabilities". In fact, I think there are some browsers out there that have problems displaying pages made in complete CSS.
    No, that's not what I meant by "people with disabilities." I'm not an expert, so I'm not going to attempt to summarize the entire Web accessibility movement in this thread, but accessibility involves making your site readable and usable by people who have to use all sorts of non-browser devices in order to browse the Web. My original tables-within-tables layout would have caused many of those non-browser devices to either display totally blank pages or to read out loud a confusing and frustrating jumble of table code for many seconds before getting to the content on each of my pages.

    You are correct that some very old browsers have problems displaying pages made in complete CSS, and even most newer browsers don't support all of the CSS standard -- that's why I avoid using CSS properties that are not yet widely supported, and that's why I use @import to hide my stylesheets from those very old browsers. People who still use those very old browsers can still view, navigate and read my 100% CSS pages -- they just won't see the nice 2 or 3-column layout. As they upgrade to newer browsers, my site will look a lot better to them. And, of course, I've followed the WCAG to ensure that my pages contain the accessibility features required by those who are disabled. To me, that's a highly accessible, forward-thinking solution that will work long into the future.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  24. #24
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ComputerBob
    Vinnie,

    I have to strongly disagree with your last post.

    First of all, nobody has ever claimed that Tableless Layout = Accessible, so it was a straw man argument when you proclaimed that Tableless Layout != Accessible.

    Of course Tableless Layout != Accessible. Anyone who has any knowledge of the subject already knows that.

    By that same logic, let's all agree that Table Layout != Accessible, too, so we can get beyond spurious arguments and discuss the real issues here.
    Agreed. "Layout methods have little to do with accessibility" is a more accurate statement, so let's run with that .
    Quote Originally Posted by ComputerBob
    Second of all, you and I both know that the CSS example that you gave used very inefficient coding that could be significantly reduced with the use of an external stylesheet.
    I totally agree, which is why I used an inefficient example: to prove a point. That sample could very well have passed for XHTML 1.0 Transitional, but it was crap. My point was that it didn't have any semantics to it and would have just been read off as text with no other meaning to alternate browsing devices like screen readers, while the table example would have had a deeper meaning attached to it.
    Quote Originally Posted by ComputerBob
    I could just as easily rig up a table example that is even more inefficient and even less accessible than the CSS example that you gave. That wouldn't prove anything, and neither do your examples. The use of tables and the use of tableless layout are both methods that we can use -- neither is intrinsically accessible "out of the box."
    Right. And? That was my point!
    Quote Originally Posted by ComputerBob
    Third of all, your post states, "TigerFan is right. Tableless layout != Accessible!" Unless you're referring to some other thread, you're putting some words in TigerFan's mouth to conclude that his/her post made that statement.
    I was referring to this when I said TigerFan was right:
    Quote Originally Posted by TigerFan
    trying to equate using tables to not providing wheelchair access is absurd.
    I still think he is right. Show me where my line of reasoning is wrong and I'll gladly apologize and admit defeat .

  25. #25
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    I still think he is right. Show me where my line of reasoning is wrong and I'll gladly apologize and admit defeat .
    I'm not looking to "defeat" anyone, and though I disagree with you, I have no problem with you expressing your opinion.

    I'm just saying that although you may strongly agree with what you THINK TigerFan posted, I see absolutely no discernable correlation between what you THINK he posted and what he ACTUALLY posted.
    Last edited by ComputerBob; Oct 22, 2003 at 12:50.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search


Bookmarks

Posting Permissions

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