SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 78
  1. #1
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    HTML WG approve tables for presentational purposes

    Some interesting developments on use of tables for presentation at the W3 HTML working Group.

    The proposal for tables.

    The Objection Poll.

    The proposal against tables.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hmm, seems like a storm in a teacup to me. "Must not" vs "should not" seems pretty trivial. It's like saying that a hammer is for hitting nails and therefore *must not* be used for something else. It can be used for all sorts of things, even if it's not the ideal tool for those activities. There are many reasons why tables shouldn't be used for presentation, but the world isn't going to end if someone does use them for that purpose. And anyone who has to create HTML emails realizes that some media are just not ready for non-table layouts … sad as that is.

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I agree, that there should be a push for disallowing tables for presentation. However the sword is two sided. The role="presentation" might work, that is if the end user has the most up to date software, which we shouldn't assume. I discussed the reason why we can't in another thread the other day. On the other hand, people who are using tables for layout probably wouldn't know about or implement the role. So, it would go unused. Another reason layout tables may still be used is if you are in a very limited lab type setting, where something like IE6 has to be used for security reasons.

    Actually, while typing this, I would advocate that the name of the value of the attribute should be changed to presentation-table, or presentationTable. I find that a number of attributes overlap, renaming it would make it more clear.
    Ryan B | My Blog | Twitter

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Why should tables not be used for presentation. With IE6 and IE7 dying off we are getting close to the point where it will be perfectly practical to use the CSS table commands and have them work correctly for presentation.

    Of course that's another argument against using the HTML table tags for that purpose.

    So once IE7 and earlier are dead we do have presentation tables available.

    So for a data table we have:

    <table><tbody><tr><td>

    and for a presentation table we have:

    .table {display:table;}
    .tr {display:table-row;}
    .td {display:table-cell;}

    <div class="table"><div class="tr"><div class="td">
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    All of the links Vic referred to is regarding the table tag in HTML. Nothing I saw referred to CSS alternatives. I think using divs to make a layout table is fine from an accessibility point of view. I would love to see how nasty the code would be to build a layout in a CSS table format. Then have a discussion on how a CSS table layout is so different than floating blocks, etc using CSS.
    Ryan B | My Blog | Twitter

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rguy84 View Post
    I would love to see how nasty the code would be to build a layout in a CSS table format. Then have a discussion on how a CSS table layout is so different than floating blocks, etc using CSS.
    Yes, it is very different - CSS tables work the same way HTML tables do (which is what you'd expect since the default for <table> is display:table, the default for <tr> is display:table-row and the default for <td> is display:table-cell) and so the two example codes I mentioned are identical in how they work except in IE7 and earlier except that one is using tags that semantically identify the content as tabular data and the other uses semantically neutral div tags so that it implies nothing whatever about the content.

    Switching from using HTML tables incorrectly for presentation to using the CSS equivalent would be as simple as substituting the divs with the appropriate classes for the table tags. The only limitation is that it only supports the latest two versions of IE and not IE7 or earlier.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,323
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by felgall View Post
    So for a data table we have:

    <table><tbody><tr><td>

    and for a presentation table we have:

    .table {display:table;}
    .tr {display:table-row;}
    .td {display:table-cell;}

    <div class="table"><div class="tr"><div class="td">
    does the presentational css look bloated to anyone else but me?

    i mean, try explaining to a noob why the table tags are perfectly okay to put data into, but all of a sudden are bad for presentation whereas that other div crap, which bends over backwards to work like a table without actually being a table, is more acceptable...
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by r937 View Post
    does the presentational css look bloated to anyone else but me?
    That code was a response to the suggestion about introducing a <presentation-table> tag as I was simply pointing out that one already exists.

    I agree with you that it not only looks bloated, it actually is. I was simply pointing out that it is possible to do a direct substitution like that so as to convert from using tags in HTML that have a semantic meaning for something where that meaning doesn't apply to using tags that don't have a specific semantic meaning that achieve exactly the same result and so the suggestion of a <presentation-table> tag is unnecessary.

    That also makes the proposal to change the meaning of the table tag so as to allow its use for presentation meaningless since such tags for that purpose already exist (even if they are bloated).

    I never said it was a good idea to use tables (either HTML or CSS) to do the entire layout of a web page. Even when using CSS tables their use for laying out an entire page would be inappropriate as that would just reporduce most of the same issues that exist if you use HTML tables for layout.

    Of course those who still believe in using tables for layout will never really realise how wrong that they are until they have a web site of several thousand pages where the layout of all of the pages is to be altered and it ends up taking them months tomake the change instead of minutes.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,323
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by felgall View Post
    ...laying out an entire page would be inappropriate as that would just reporduce most of the same issues that exist if you use HTML tables for layout.
    people who use tables for layout would question what those issues are

    i hasten to add that i do not include myself among them, but also that i don't really see any serious issues either

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    One of the biggest reasons for not using tables for a layout is you can't easily "break out" of them if you wanted.

    For example, if I have three division elements (let's say A, B, and C) each of which essentially form a row. If I had a table equivalent (so A, B, and C formed a single-column table), there isn't really any problem with tables, divs, or whatnot.

    However, if you one day decide that you want to change the layout of A, B, and C so you have A on the left and B, C on the right. That's a fairly quick and easy change with CSS on divs. However, that'd be very difficult and ugly to do with tables, and maybe impossible to get cross-platform.

    I don't use them purely on the semantic basis (and will probably skip CSS tables because I'm not a fan of grid-based layouts because you either have to shift everything to fit your grid, or make your grid of 1000 columns to get everything on them).

  11. #11
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    "Must not" vs "should not" seems pretty trivial. It's like saying that a hammer is for hitting nails and therefore *must not* be used for something else.
    "Must not" is actually a prohibition of the use, whereas "should not" is a strong suggestion not to use them.
    These terms are actually defined here RFC 2119 - Key words for use in RFCs to Indicate Requirement Lev (RFC2119)
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  12. #12
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    At first, I was a bit annoyed by this news, but thinking about it - it is positive.

    It's not like they've said you should use them, they are still recommending against it. So we've gone from a situation where they said you must not do it, and many people ignore them and do it anyway, to one where they say you should not do it, and people will ignore them anyway.

    Anyone opposed to tables for layout will continue with css, and vice versa. It will make no difference in general to who uses what, but it does add the ability to assign the presentation role to the table to flag to the browser that it isn't tabular data, a positive.

    I still disagree with the practice, but this decision seems sensible to me.

  13. #13
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Stephen I suggested the value to be changed from presentation to presentation-table. I didn't mean a new tag to be made. One things ARIA is kind of frowned upon is there area lot of roles that overlap, and a few of them make you stop and debate which to use. So clearly demarking it as a presentation-table makes it that much clearer. Presentation may lead to people think it is for putting it on a wall like a PowerPoint.
    Ryan B | My Blog | Twitter

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rguy84 View Post
    Stephen I suggested the value to be changed from presentation to presentation-table. I didn't mean a new tag to be made. One things ARIA is kind of frowned upon is there area lot of roles that overlap, and a few of them make you stop and debate which to use. So clearly demarking it as a presentation-table makes it that much clearer. Presentation may lead to people think it is for putting it on a wall like a PowerPoint.
    The CSS version is stil shorter - plus it can be applied just to specific media.

    A presentation table makes no sense whatsoever when someone is using a web reader. There the order that the page ought to be read out in is unlikely to match the order that a table would require it to be in regardless of how the table is generated (except if the table contains tabular data where the headings and content can be connected).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    What is a web reader? I am missing your point of the post.
    Ryan B | My Blog | Twitter

  16. #16
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    HTML Code:
    <div class="table"><div class="tr"><div class="td">
    That makes be shiver. I think you just meant to show the concept, but if I ever saw that exactly in production HTML I would need a drink (I've seem similar though it was a acceptable edge case).

    As of late the w3 just seems like to stir the pot. Must not to should not… w/e like either side gives a damn. The problem will always lie with defining what a "presentational table" is from a technical stand point. Is it a table with images in it, blank cells, etc? – there are just to many possibilities. In the end any restraints from a technical stand-point would restrict an legitimate edge case resulting in a hack or none semantic HTML for cases that do have "legitimate" purposes but fall under the definition of a "presentational table".
    The only code I hate more than my own is everyone else's.

  17. #17
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rguy84 View Post
    What is a web reader? I am missing your point of the post.
    A web reader speaks the content of the web page instead of displaying it. So imagine that your screen is turned off and your computer speakers are the way you interact with the web page. The we b reader converts the web page into something your speakers can output but with a layout table the cells will almost certainly be read in the wrong order.

    There are a significant number of web users who are blind and therefore rely on what their web reader tells them is the content of the page. There are even several blind people using web readers to interact with this forum but it is impossible to tell who they are because they can use the internet just as well as sighted people can just as long as the web page doesn't content the really scramble.

    To0 properly experience the web via a web reader you should blindfold yourself and rely on the pips on the home keys of your keyboard to work out what you are typing as well.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by oddz View Post
    I think you just meant to show the concept, but if I ever saw that exactly in production HTML I would need a drink
    Yes I was intending to show just the concept. Actually rewriting the HTML to work like that is no better than having the tables there in the first place (yes seeing it in production would and should drive people to drink). It does however demonstrate that where table like layout is required for a part of a web page that the appropriate CSS display values can be used to achieve it without needing to add a table into the HTML.

    Any proposal to "allow" presentation tables in HTML now is like getting a locksmith in to fix the lock on your front door after the rest of the house has collapsed. The last possible eason for misusing tables in HTML will die when IE7 does and that doesn't appear to be too far off now as the percentage of people using such antiquated versions of IE is now falling so rapidly that the need to support that browser hasn't got long to go.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Victorinox View Post
    Some interesting developments on use of tables for presentation at the W3 HTML working Group.

    The proposal for tables.

    The Objection Poll.

    The proposal against tables.

    Seems another backwards step to me and will more likely encourage the use of nested tables that we have just about managed to clear up over many many years.

    It will have the same detrimental effect on quality code that html5 is starting to show us now in the forums. The quality of code has dropped and people are being careless again.

    e.g. "I can nest anchors around block elements in html5 so its ok to nest spans around block elements - it still works!" (answer ....no it doesn't it often breaks.)

  20. #20
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by r937 View Post
    does the presentational css look bloated to anyone else but me?
    Of course, using child selectors would mean you'd only need class="table" and not classes for the rows or cells.

    I don't see display:table; being a viable layout option. One of the principal strategies for using layout tables is colspan/rowspan, which is very easy to do with <table> elements ... not sure that it would be so easy with mock-tables.

    What we need is a working 'visual' layout method in CSS if we're going to wean the remaining layout-table-ites onto better coding practices. Using display:table; is the worst of both worlds - it embeds and ingrains bad coding and layout practice but loses a lot of the flexibility that tables innately have.

    Quote Originally Posted by Paul O'B View Post
    Seems another backwards step to me and will more likely encourage the use of nested tables that we have just about managed to clear up over many many years.
    Sadly, that's true - but no great surprise given the gems of wisdom that are foisted on us on a regular basis.

  21. #21
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    A web reader speaks the content of the web page instead of displaying it. So imagine that your screen is turned off and your computer speakers are the way you interact with the web page. The we b reader converts the web page into something your speakers can output but with a layout table the cells will almost certainly be read in the wrong order.
    I am guessing you are either meaning a) A screen reader like JAWS or Window-Eyes, or b)text-to-speech output like you can enable in Opera. These two technologies work very differently if you know how to use them. Only a screen reader works with the screen off and is at least 10x more powerful than you are making it out to be. A text-to-speech program either the builtin one in Opera, or ClaroRead, (especially the first) you still need to see the screen to select/highlight blobs of text you need read. JAWS and other screen readers actually scrape the code to know what to read. Speech output just looks at the words on the screen.

    Quote Originally Posted by felgall View Post
    There are a significant number of web users who are blind and therefore rely on what their web reader tells them is the content of the page. There are even several blind people using web readers to interact with this forum but it is impossible to tell who they are because they can use the internet just as well as sighted people can just as long as the web page doesn't content the really scramble.
    Again you are over-simplifying. Screen readers will announce that there is a table element, if the screen reader will anounce table with x columns, and y rows, if the summary attribute is defined it will say that, if there are headers defined it will announce them. After that, it depends on the user level and mark up. I say this because JAWS has hotkeys to navigate tables, which is great if you are in a data table, but not in a layout table. Since you can identify <th scope="col"> or using <td headers=""> the table will be read slightly differently. Juicy Studio: Complex Table Inspector. I simply am advocating that the value of the role attribute should be more descriptive.

    Quote Originally Posted by felgall View Post
    To0 properly experience the web via a webscreen reader you should blindfold yourself and rely on the pips on the home keys of your keyboard to work out what you are typing as well.
    I advocate for this, but read some instructions prior to jumping in. If you don't you may get frusterated quickly.
    Ryan B | My Blog | Twitter

  22. #22
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    What we need is a working 'visual' layout method in CSS if we're going to wean the remaining layout-table-ites onto better coding practices. Using display:table; is the worst of both worlds - it embeds and ingrains bad coding and layout practice but loses a lot of the flexibility that tables innately have.
    Play with the demo at: CSS2 - The display declaration. I haven't found a good row/col-span example yet.
    Not sure why oddz is shivering...
    Code:
    <div class='table'>
     <div class='tr'
       <div class='td'>
       hello.
       </div>
     </div>
    </div>
    doesn't look too different from
    Code:
    <table>
     <tr>
      <td>
       hello
       </td>
     </tr>
    </table>
    other than tags :shrug:
    Ryan B | My Blog | Twitter

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    yourself and rely on the pips on the home keys of your keyboard to work out what you are typing as well.
    I never could, never will touch-type. Luckily I can have the reader read out the letters I type if I'm typing on screen. But that's so hideously slow... so I stare at my keyboard instead, lawlz. And I'm on a laptop so I can sudo vbetool dpms off... not that that always works *frustration*



    I wondered if this was someone's idea of making layout tables somehow better for AT.

    JAWS will (or at least the older versions did) try to guess if a table is a real table or a layout table, based on td widths (and some other things). This means it won't always get it right... whereas, maybe the idea was that if the author were to put the role in manually, that the reader would get it correct more often.

    But, as someone already pointed out, people who use tables for layout don't use roles. This won't affect any pages with layout tables until CMSes start automatically adding role attributes to stuff (I'm waiting for it... dreading it too).

    Not sure why oddz is shivering...
    Because this
    Code:
    <div class='table'>
     <div class='tr'
       <div class='td'>
       hello.
       </div>
     </div>
    </div>
    is an abomination unto teh Lawd compared to this:
    Code:
    <p>hello.</p>
    Which is, I assume, what oddz was thinking.

    I simply am advocating that the value of the role attribute should be more descriptive.
    Well since it's the last of the list on the page
    The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0
    I don't see anyone making different versions of the role for each of those (and truthfully I don't understand the img example).
    LAWLZ <div class="clear" role="presentation"></div>
    I don't get that one at all, since empty elements for "clearing" (ack) or CSS hooks aren't posing a problem today anyway.

    Basically a role for crappy markup should be called what it is:
    role="markupabuse"

  24. #24
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Well my example was a simple table. I didn't want to make multiple rows/cols.

    I don't get what you are getting at. Take a glance at WAI-ARIA Taxonomy, wouldn't you say having an explicit presentationTable branch would be nice.
    Ryan B | My Blog | Twitter

  25. #25
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    Well yeah, if "hello" is a paragraph than using a paragraph tag would be appropriate. However, if "hello" has of a collection within a data grid than a table would be much more proper than hacking one except when dealing with rare edge cases.
    The only code I hate more than my own is everyone else's.


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
  •