SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 68
  1. #1
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)

    CSS display:table - Pros and Cons for layouts

    With all the questions that keep coming up about using tables for layout I thought a thread on the pros and cons of doing so would be useful. I'll start with the ones I can think of and others can add theirs to help people work out whether they should use tables for part of their page.

    Let's assume that the HTML uses semantically correct tags to mark up the content and that it will stay that way regardless of what CSS we use to define how we want it to look.

    Pros

    1. It is the easiest way to the same height.
    2. It avoids using float or position:absolute for purposes for which they were not intended.
    3. It provides a simple way for beginners to produce side by side layouts in CSS without polluting their HTML with non-semantic tags.


    Cons

    1. It doesn't work in IE7 and earlier and so you either need to define a different layout for those browsers or mess around with floats or position:absolutes to produce CSS for those browsers which works equally well in other browsers anyway.
    2. To create a colspan or rowspan effect requires nesting one table inside another.
    3. It encourages people to build grid layouts rather than taking a more flexible approach.
    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="^$">

  2. #2
    SitePoint Addict aguroyz's Avatar
    Join Date
    Jan 2009
    Location
    Konoha Fire Country
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tnx for this..
    Uniquely FILIPINO... See how talented and creative Filipinos are.
    http://www.smalltym.com
    Custom Web Designs:
    http://proweaver.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I think you need to re-phrase (or clarify) the question as I'm a little confused

    Are you talking about html tables or using the display:table CSS property because your Number 1) comment under "Cons" doesn't make much sense otherwise because tables work fine in IE7 but of course display:table doesn't

    It's not immediately clear what the topic is

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stephen is talking about display:table and related box types, i.e., 'modern' layout tables.

    Although I understand your intent, Stephen, I think there's a risk that unsuspecting readers will get quite the wrong idea.
    Birnam wood is come to Dunsinane

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Personally I thought he is talking about <table>'s because he said using "tables for layout" and that indicates not using display:table.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Does this mean we've moved on from the semantics of HTML to the semantics of CSS?

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or perhaps from the presentational aspects of HTML to the semantic aspects of CSS? Out of the frying pan and into the fire.
    Birnam wood is come to Dunsinane

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    I'd have thought that from the fact that I posted this in the CSS forum and from the pros and cons that I listed (as well as the mention of semantic HTML) would make it obvious which sort of tables I meant. Using <table> isn't semantic and isn't CSS. The pros and cons are supposed to be regarding the setting up of grid layouts using display:table.

    There's no need for a thread on pros and cons of using <table> for layout because that is just completely wrong in the first place.

    I gess it is basically intended to be a discussion of CSS semantics since it can be argued that using anything other than display:table for setting up a grid type layout is using the wrong CSS for the job even if it does work in all browsers

    Also this is the one area of discussing table layouts where there are legitimate arguments both ways (unlike <table> where there are no remaining legitimate arguments for using it for layout).
    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
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by felgall
    I'd have thought that from the fact that I posted this in the CSS forum and from the pros and cons that I listed
    I knew what you meant but I also knew that loads of others wouldn't hence the reason why I raised the question

    Now that you have clarified
    2. It avoids using float or position:absolute for purposes for which they were not intended.
    I disagree with the above statement as floats were always intended for layout as this test page from the w3c about ten years ago shows

    Absolute positioning can also layout pages but is limited in usefulness in certain situations.

    I'll agree that neither floats or absolute positionng are the complete solution and we could do with something better.

    I think display:table is a step in the right direction but is just another tool to use when other tools are not good enough. However I don't think there's a need to do everything with display:table when there may be simpler alternatives. If you find at a certain point that you need 3 equal height containers then slip in the display:table when needed.

    There are also reservations about how browsers will handle them and at present Firefox handles them badly unless you physically add the display:table-row as additional extra mark up. IE8 also seems a but shaky at the moment but hopefully it will be fully functional when finally released.

    In essence my pros and cons wouldn't be much different from the ones in the first post.

    PROS
    Equal Columns

    Cons:
    Inconsistent handling by browsers.
    No support in IE7 and under
    Extra mark up required for Firefox
    Rowspans and Colspans are not implemented by default
    Grid type layout is too rigid

    Quote Originally Posted by Raffles
    Does this mean we've moved on from the semantics of HTML to the semantics of CSS?
    I don't actually see CSS as having any semantic value because that's the the purpose of the html. Whether an element is marked up as display:table or as float:left has no meaning other than how the element will be presented . It doesn't infer anything else on the mark up as far as I'm concerned.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I disagree with the above statement as floats were always intended for layout as this test page from the w3c about ten years ago shows \

    I think display:table is a step in the right direction but is just another tool to use when other tools are not good enough. However I don't think there's a need to do everything with display:table when there may be simpler alternatives. If you find at a certain point that you need 3 equal height containers then slip in the display:table when needed.

    PROS
    Equal Columns
    Just to clarify - what I had meant to say was that floats were never intended to be used to create adjacent elements of equal height - which of course is something that they can't actually do and you have to play around with a few other things so as to give them the appearance of having equal height whereas the purpose of display:table-cell is that adjacent cells will automatically have the same height.

    I also agree with you about tables not being the solution to everything.The big danger once all browsers do support them is that people may start trying to use them do do the entire page layout and they'll end up with rigid inflexible grid based designs and ignore the other 99%+ of page layouts that are possible.
    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="^$">

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stephen
    Just to clarify - what I had meant to say was that floats were never intended to be used to create adjacent elements of equal height - which of course is something that they can't actually do and you have to play around with a few other things so as to give them the appearance of having equal height whereas the purpose of display:table-cell is that adjacent cells will automatically have the same height.
    Ok, yes I understand and agree with that

    I think we are basically saying the same things.

    Display:table is another useful tool towards a full solution. It's a shame that CSS didn't encompass all the things that designers needed from the start. There are a lot of things implemented that no-one uses but basic layout techniques should have been the starting point.

  12. #12
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cons:
    - Design maintenance later on

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bulevardi View Post
    Cons:
    - Design maintenance later on
    How - I'd expect it to be the exact opposite.

    The CSS is simpler and therefore easier to maintain. If you need to change from display:table to something else in your CSS because the two or more elements no longer need to be the same height then it is easier to do if the equal height elements were coded using display:table in the first place than if they were coded using some other CSS that isn't intended for setting adjacent elements to equal height.

    Can you explain how using a specific element in the CSS instead of a whole bunch of CSS to simulate that same effect makes it easier rather than harder to maintain.

    How is

    Code:
    .col {display:table-cell;height:200px;}
    harder to maintain that the much larger amount of CSS necessary to simulate several columns that are all the same height if you don't use CSS tables?
    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="^$">

  14. #14
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    2. To create a colspan or rowspan effect requires nesting one table inside another.
    This one right here had me convinced for a moment that the subject was "tables for layout" instead of "display: table for layout".

    Could add to the Pros: vertical-alignment.

    Setting display: table on everything-- who the heck does that? It makes things display like tables which, other than the height and vertical-align things, suck!

    They accordion.

    They wobble.

    They act differently with widths.

    They set off two nasty Firefox bugs.

    In a very long page with a long column with a lot of display: table elements (with no further styling and no table-row or table-column stuff) Opera finally loses it and stops rendering (the page has to be kinda long for this and as it and FF are the only ones who have issues with this I expect them to be fixed... eventually).

    99% of the time display: table does exactly what I DON'T want it to do-- makes the page elements act like tables. Floats and positioning and margins all do a much better job at making the page the way I want it-- with full Nazi-like control over any strange thing some user might throw at it.

    Agreed with Paul re the sole equal-height advantage (but also adding vert-align), though I haven't used display: table for this yet (in page columns). But using an image to fake it is, actually, a nasty, often inflexible hack that also requires another GET request-- an unneeded one if CSS had let us do things like vertical-align with auto vertical margins (with rendered heights not stated heights) or % heights based on rendered (not stated) parent heights.

    I also want a parent selector and a pony for Christmas.

  15. #15
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i initially thought it was about tables too, so the no ie7 confused me, thanks for clarifying this.

    every con and pro i could think of was already said, so ill just say.

    stupid ie7 and lower...

    display table should be used to create a css based table?
    not to create the "look" of a website?

  16. #16
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Used to create a css-based table?

    Only if you think your page looks great dressed up like Excel : )

    Table tables, they are already actually display: table so they're set.

    display: table in regular css is good for the things listed above (making vertical-alignments and having equal-height side-by-side siblings), and for one other thing I can think of:
    I redid a page that had been built all in tables, including a menu. The designer wanted to preserve the tabley-ness of that menu, while I knew it should be a menu not a table cause that's what it was, a menu. But it needed to accordion.

    So I used display: table here (white menu, stretchie with your browser) and for the first time had used HTML IE CC's to get IE looking decent. I'm still normally preferring
    * html #element {blah;}
    *+html #element {blah;}
    in the single CSS sheet rather than every single HTML page, but this went into an Evil Templating System anyway, so it didn't matter.

  17. #17
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    i initially thought it was about tables too, so the no ie7 confused me, thanks for clarifying this.
    Well all sensible web page authors know to write semantic HTML where table tags are used to contain tabular data and for no other purpose.

    There is still room for people to disagree as to whe it is appropriateto use the CSS table commands display:table, display:table-row and display:table-cell although from the look of all the posts so far everyone io far is in agreement on what it should be used for and what the advantages and disadvantages of using it are.

    Perhaps we should also consider when it would be appropriate to start using them given that IE7 and earlier don't support the commands.
    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
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Perhaps we should also consider when it would be appropriate to start using them given that IE7 and earlier don't support the commands.
    valid point.

    edit: if we were to support the most common user, the answer would be... never.
    even tho w3c says the amount of ie6 users is 20.0&#37;, the percent is actually larger.

  19. #19
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    even tho w3c says the amount of ie6 users is 20.0%, the percent is actually larger.
    I doubt that much more than 20% of people visiting the W3C are still using IE6. The exact percentage depends on what your site is about. My own site has IE6 hovering around 20-21% at the moment and I'd expect the percentage for the W3C site to be a lot lower than that.

    It isn't necessary that we wait for IE6 and IE7 to completely disappear before starting to use things that those browsers don't support. There is nothing that says that your page has to look the same in all browsers or we'd still be writing pages that display the same in Nexus (or World Wide Web as it was originally called) as well as in far more modern browsers such as Mosaic and Netscape 1 etc. The question on when to stop worrying about the site degrading to a more basic but still usable version in antiquated browsers such as IE7 needs to be made on a site by site basis. For some sites it may not even be necessary that the majority of visitors be using a browser that makes use of all the features built into the page.
    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="^$">

  20. #20
    SitePoint Enthusiast v1rgil's Avatar
    Join Date
    Dec 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The exact percentage depends on what your site is about.
    I would agree to that.

    For me, using cool css stuff which older browsers don't support, is an opportunity to tell people how great it is to upgrade.

  21. #21
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There has been a lot of discussion about CSS tables for page layout of late, with strong opinions for and against.

    A strong advocate of using them is Kevin Yank. One of his arguments is that CSS tables offer an easy way for beginners to get up-and-running with CSS.

    A strong detractor is Eric Meyer. One of his arguments against them is that they don't allow for source order flexibility, and hence are a backward step in terms of advancing the web.

    So perhaps it's all a matter of perspective--depending on whether we are talking entry-level design or advanced. Of course, it's probably better not to learn something if you will later have to drop it, so I'm starting to side with Eric Meyer.

    Besides, I did not find it hard to learn CSS layout anyway. One good book is all one needs to get a pretty solid grasp of it.

    My 2c worth.
    Simple is beautiful.

  22. #22
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Pro: Being a nested element it may mean that alike to HTML tables, inheriting percentage widths may be more consistent then trying to inherit widths using floats.
    Pro: If trying to achieve “stacked” elements (such as boxed items shown next to each other) this technique will be much more reliable than using floats to force everything into what could be 5 columns... an example of this could be an image gallery which shows 5 images per row without needing empty divs to clear for the next row.
    Con: By styling the element as a table, they force us to retract back to the older model pointing towards keeping our designs "within the grid" rather than trying to promote the benefits of more flexible unique layouts.
    Con: Reliance on this technique may lead to abuse and could result in divitis being invoked to overcome some of the systemic problems which tables of any kind usually end up causing (Especially with browser inconsistencies in rendering CSS).

    It really is a toss-up... the application of CSS tables does have advantages, but it will be so easy to abuse, people who don't understand semantics may end up making things worse.

  23. #23
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Con: The structure of a document laid out using tables is not friendly to screen reader users, thus less accessible.
    Cross browser css bugs

    Dan Schulz you will be missed

  24. #24
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Con: The structure of a document laid out using tables is not friendly to screen reader users, thus less accessible.
    The document isn’t being laid out using tables though, it’s being served semantically, just having nested tables served through CSS style, which does not affect the document flow - and ergo the accessibility for screen readers (that I am aware of).

  25. #25
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    How do you have "nested tables served through CSS style" while keeping the source order semantic and logical?

    I'm confused.


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
  •