SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS divs vs table help

    I think tables are pretty easy to use. But they are not fluid like divs are. Is there a way to make divs set up so they act like tables. Example. Have three div boxes across the page. Even in size. What is the easiest way to accomplish this? Cross browser compatible too?
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zeeb44 View Post
    I think tables are pretty easy to use. But they are not fluid like divs are.
    Tables are usually not appropriate for page layout, but they are (or can be) fluid, though.


    Is there a way to make divs set up so they act like tables. Example. Have three div boxes across the page. Even in size.
    This is quite standard. You could float three divs left and set them each to, say, width: 33%. That's very simple and very common. If you need more table-like behavior (such as the three divs being of flexible height but always the same height as each other) then you can use a combination of display: table and display: table-cell on those divs.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Location
    Down underer
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of re-inventing the wheel, have you had a look ad different grid layouts? http://www.cssgrid.net (fluid + scales down to mobile) or http://960.gs (960px wide) are some i have used.

    You just start with the demo.html and position your divs as you want your layout. For example in 960 you can have a column-grid of 12 cols or 16 cols. Within your column-grid you then just add one or more pre-definded colums so that they add up to the 12 or 16 colums of the parent container - see http://960.gs/demo.html . this way you can pretty much build any (common) layout, and afaik it even works in IE6.

  4. #4
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    ... If you need more table-like behavior (such as the three divs being of flexible height but always the same height as each other) then you can use a combination of display: table and display: table-cell on those divs.
    Would faux columns be a better for for that situation?

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,811
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by imaginekitty View Post
    Would faux columns be a better for for that situation?
    Only if you need to support IE7 and earlier. For modern browsers that properly support CSS 2.1 you can get real columns the same heightusing display:table and display:table-cell without having to fake it.
    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="^$">

  6. #6
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Only if you need to support IE7 and earlier. For modern browsers that properly support CSS 2.1 you can get real columns the same heightusing display:table and display:table-cell without having to fake it.
    Faking it? CSS is presentation. Considering presentation, perception is reality.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zeeb44 View Post
    I think tables are pretty easy to use.
    For what? Are you talking about for general page layout? Or for tabular data?

    For page layout, I have found that now that I have stopped supporting IE 6, building pages with tableless CSS is actually easier now than when I used tables. I feel that I have more options and more precision (ie not having to chop images up into a grid etc etc)

    For tabular data, nothing beats a table. Use it, and enjoy its power!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by imaginekitty View Post
    Would faux columns be a better for for that situation?
    Sounds like the OP wanted flexible boxes (width-wise) which would be a problem for faux cols.

  9. #9
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdt76 View Post
    For what? Are you talking about for general page layout? Or for tabular data?

    For page layout, I have found that now that I have stopped supporting IE 6, building pages with tableless CSS is actually easier now than when I used tables. I feel that I have more options and more precision (ie not having to chop images up into a grid etc etc)

    For tabular data, nothing beats a table. Use it, and enjoy its power!
    Just referring to general page layout. I used to be big into tables before I understood CSS. I prefer using CSS but was just curious about making content boxes, say three wide across a page layout. and centered in the page. Because if you float all of them left then they will be lined up next to each other but not centered correct?
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zeeb44 View Post
    Because if you float all of them left then they will be lined up next to each other but not centered correct?
    You can wrap them in another div that is centered. That's no problem.

  11. #11
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Either way you would have to specify an exact width right? So you can set the left and right margin to auto for it to be centered. I always hear though that setting div widths to an exact width are frowned upon and should always be fluid.
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zeeb44 View Post
    Either way you would have to specify an exact width right?
    You could use % widths so that they are flexible, like so:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style media="all">
    .wrap {width: 80%; overflow: hidden; margin: 0 auto;}
    .inner {width: 33%; float: left; height: 400px;}
    .one {background: red;}
    .two {background: blue;}
    .three {background: yellow;}
    </style>
    </head>
    
    <body>
    <div class="wrap">
    	<div class="inner one">
    	</div>
    	<div class="inner two">
    	</div>
    	<div class="inner three">
    	</div>
    </div>
    </body>
    </html>

  13. #13
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah ok. Thanks very much, that definitely clears up some things for me.
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  14. #14
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdt76 View Post
    For what? Are you talking about for general page layout? Or for tabular data?

    For page layout, I have found that now that I have stopped supporting IE 6, building pages with tableless CSS is actually easier now than when I used tables. I feel that I have more options and more precision (ie not having to chop images up into a grid etc etc)

    For tabular data, nothing beats a table. Use it, and enjoy its power!
    Yes, I agree. I find POSH and CSS much simpler than splitting background images and stitching them back together in nested tables.

    Quote Originally Posted by zeeb44 View Post
    ... I always hear though that setting div widths to an exact width are frowned upon and should always be fluid.
    What? No. I don't agree. I find long lines tiring to read and I like to keep my browser open on most of the screen. It depends though. There is no rule on the subject.

  15. #15
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The main point is being overlooked.

    Your PRIORITY SHOULDN'T BE based on what the default presentation of the element looks like. use tables for tabular data, and div's as non semantic dividers or extra hooks for CSS2.1. PERIOD.

    In most modern browsers, you can make a TABLE look like a DIV table, tr, td{display:block}
    You can make nested DIVs behave EXACTLY like tables, using display:table; display:table-row; display:table-cell; However I you are merely search-and-replacing table/tr/td with DIV ... you are missing the point of CSS entirely.

    If you abandon the "copping the info for table cells" you will see that the same or similar look-and-feel can easily be achieved, albeit in an entirely different procedure. Start to consider floating elements, over-all wraps ( preferably, but not necessarily semantically linked) and faux-bgs. Really CSS is more of a mindset than anything else.

  16. #16
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imaginekitty View Post
    Yes, I agree. I find POSH and CSS much simpler than splitting background images and stitching them back together in nested tables.

    What? No. I don't agree. I find long lines tiring to read and I like to keep my browser open on most of the screen. It depends though. There is no rule on the subject.
    Media Queries to the rescue (for browsers that support them, and for those that do not, there are javascript solutions to force the issue). What you can do is set a max width for the flexible DIV, then use media queries to make the text larger at certain screen widths. I have a huge screen so I was able to see that at my resolution text was looking a bit small. I know that resolution and screen width are not the same thing, but usually with a huge screen, resolutions are higher by default. You wouldn't get a giant screen set to 800x600 resolution by default. When I have tested it, it's worked out well to keep words per line down to a manageable amount.

  17. #17
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    In most modern browsers, you can make a TABLE look like a DIV table, tr, td{display:block}
    You can make nested DIVs behave EXACTLY like tables, using display:table; display:table-row; display:table-cell; However I you are merely search-and-replacing table/tr/td with DIV ... you are missing the point of CSS entirely.
    That's true, but you would want to avoid that for tabular data would you? I mean for now, "modern" is a huge qualifier. But even if not, isn't the TABLE element more semantic than taking tabular data and placing it in DIVs set to display:table? I don't know, I am really just asking. Is it better for accessibility to use TABLE rather than DIVs for tabular data?

    Also, it is worth pointing out, from what I have been told, that if you do use display:table/cell etc for page layout using DIVs, you do lose the ability to use positioning properties like absolute or relative, so you better be sure you don't need those.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sdt76 View Post
    . Is it better for accessibility to use TABLE rather than DIVs for tabular data?
    Yes it is much better to use tables for tabular data as there is a direction relationship between cells in row and columns and a plethora of attributes that can provide mechanisms for identifying cell contents and to where they belong. This is just not possible with divs. Screen readers know how tables work also and will look for the clues in the table and identify the data correctly (although you can still build bad tables if you don't do the job properly).

    A table by its very nature makes access to the data within much more accessible than a series of unrelated divs could ever do except when talking about lists or definition lists which are special cases.

    Also, it is worth pointing out, from what I have been told, that if you do use display:table/cell etc for page layout using DIVs, you do lose the ability to use positioning properties like absolute or relative, so you better be sure you don't need those.
    If you create a table cell then it is illogical to be able to absolutely position it somewhere else and therefore browsers for the most part won't let you. Absolute positioning the content within table cells (not the actual cell) is ok but older versions of IE didn't like it much. You would still need to create a stacking context inside the cell itself as browsers are allowed to ignore position:relative on cells because the behaviour is undefined in the specs.

  19. #19
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you create a table cell then it is illogical to be able to absolutely position it somewhere else and therefore browsers for the most part won't let you. Absolute positioning the content within table cells (not the actual cell) is ok but older versions of IE didn't like it much. You would still need to create a stacking context inside the cell itself as browsers are allowed to ignore position:relative on cells because the behaviour is undefined in the specs.
    I see. I had misunderstood. I thought that you could not use positioning at all within a DIV that has a display of table/table-cell. Just never did my own test to check. It just means you can't set the positioning on a DIV that also has a display set to table. That does make sense.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sdt76 View Post
    I see. I had misunderstood. I thought that you could not use positioning at all within a DIV that has a display of table/table-cell. Just never did my own test to check. It just means you can't set the positioning on a DIV that also has a display set to table. That does make sense.
    There's a handy table here that explains what values apply when certain things are mixed. In the case of an absolutely positioned element its display is automatically set to block so if it was display:table-cell it should be become display:block and will no longer work as a table-cell. There are of course browser differences as actual table-cells could not be absolutely positioned although some modern browsers will let you set them to block but then you lose the table cell behaviour. It would be nice sometimes to shift a table cell up or down a bit on its own but still have it behave as a table-cell.

  21. #21
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It would be nice sometimes to shift a table cell up or down a bit on its own but still have it behave as a table-cell.
    So in that case, if possible, you'd have to wrap it in another div.

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sdt76 View Post
    So in that case, if possible, you'd have to wrap it in another div.
    You'd have to wrap the content in the cell in another div and then you can move it but the content won't be full cell-height or act like a cell though although it may produce an interesting effect.

    I use absolute positioning in this very old fixed table header demo and it works pretty well.


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
  •