SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 36
  1. #1
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Los Angeles
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    the age old CSS question...

    I consider myself fairly competent in CSS based designs, but I'd like to ask all you CSS gurus out there for some advice. The dilemma is CSS vs Table based design. Although it would be hard to explain the exact context of what I'm trying to achieve, we can use the sitepoint forum as a good example. If you notice the main page of the forums has a nice little layout with categories and descriptions (using the classic layout, not the "featured" layout). My question is this... Is it possible to replicate this table based design using CSS? Notice that some of the columns are fixed width while the others stretch. Also notice that the background colors on some of the columns are not the same across the whole row (as in the "currently active users" section of the footer...), this alone make it seem extremely difficult if not impossible to do. Possible? or Impossible?

    I await your responses!

  2. #2
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Course it's possible. Not necessarily easy, but there's no such thing as a design which can only be realised with layout tables.

    There is no CSS vs Tables debate - the "debate" consists of people clutching at straws, versus people trying to persuade them to let go. That's all.

    I'm not saying that I personally could recreate this layout with pure CSS - not sure - I'll say "probably". But either way - yes, absolutely it is possible to recreate this, and every single site on the internet, without abusing tables for layout.

  3. #3
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Los Angeles
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by brothercake
    Course it's possible. Not necessarily easy, but there's no such thing as a design which can only be realised with layout tables.

    There is no CSS vs Tables debate - the "debate" consists of people clutching at straws, versus people trying to persuade them to let go. That's all.

    I'm not saying that I personally could recreate this layout with pure CSS - not sure - I'll say "probably". But either way - yes, absolutely it is possible to recreate this, and every single site on the internet, without abusing tables for layout.
    Well I know it's possible... but at what cost? I agree with you mostly and I hope my post wasn't misleading in anyway. I wasn't doubting the usefulness or beauty of CSS but rather doubting it's practicality for effective use in re-creating such a design. Make no mistake, I loathe table based designs and their restrictive messy nature; I am very much a CSS proponent. Which is why I'm asking for help... I fear that I will have to resort to using tables, as in this case, they seem to be the only practical route. I'm calling upon the Sitepoint community to help me figure out a way to accomplish this without having to resort to the Dark Side.

    Help?

  4. #4
    SitePoint Member
    Join Date
    May 2004
    Location
    downey
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could always "combine" the two. i mean why not use tables for tabular type data? so you could use tables for that kind of thing and have everything formatted using divs as well. just a thought.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Glasgow, Scotland
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IMHO, if your going to produce a design that looks like you've used tables - then you should just use tables. You could replicate this forum in CSS only design but it would be allot of work, require allot of hacks and wouldn't work any better than the tabled design.

    The whole point of breaking away form tables is that it allows you to be creative and try new designs. You should try to create a design with the "feel" of the one you are copying. This is done by replicating font sizes colours and the use of whitespace. But don't try to get the structure to match exactly. Doing that would defeat the point.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by brothercake
    There is no CSS vs Tables debate - the "debate" consists of people clutching at straws, versus people trying to persuade them to let go. That's all.
    Nice quote lol

  7. #7
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I say use whatever is best.

    http://mezzoblue.com/archives/2004/05/15/tables_oh_th/

    The old arguments about using css vs tables are much the same as the new arguments about behaviour vs presentation: http://digital-web.com/articles/sepa..._presentation/

    Both good articles, read the comments on both too.

    Douglas
    Hello World

  8. #8
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Georgia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Marauder. You should use a combination of both CSS and tables to achieved the desired look and feel you seek.

    Besides.............tables aren't that bad!

  9. #9
    SitePoint Addict will_'s Avatar
    Join Date
    Apr 2004
    Location
    Asheville, NC
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trying to replicate table-based layouts with CSS is one of the main things that keeps die-hard table users from switching to CSS. They are unable to replicate a complex nested table layout in CSS with pixel-perfect precision, so they give up and write off CSS as being not powerful enough, or too hard, or not cross-browser, or all of the above.

    If you forget everything you know about tables, then approach CSS with a fresh-slate attitude, you will likely have much better success.

  10. #10
    SitePoint Addict picasso-trigger's Avatar
    Join Date
    Dec 2003
    Location
    somewhere out there
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you know 1 argument that i rarely hear...

    when times a tickin'... and you need to get it done quick to be profitable, and the client doesn't know what CSS even is... is it ok to use tables?

    i love css and recommend it all the time (especialy for se placement), but i just had to do a rush job for a client... web site in a day... yes... a web site in 1 day.

    i started mapping out the css and said to myself... what am i nuts????

    i banged it out in tables... mission accomplished.

    and yes, while you can use css to design forms.. i find it to be an exercise in aggravation... just not worth it... unless the customer asks and pays for it.

    client wants a mercedes but has a buick budget... what do you do?
    _________________________

  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 picasso-trigger
    you know 1 argument that i rarely hear...

    when times a tickin'... and you need to get it done quick to be profitable, and the client doesn't know what CSS even is... is it ok to use tables?

    i love css and recommend it all the time (especialy for se placement), but i just had to do a rush job for a client... web site in a day... yes... a web site in 1 day.

    i started mapping out the css and said to myself... what am i nuts????

    i banged it out in tables... mission accomplished.

    and yes, while you can use css to design forms.. i find it to be an exercise in aggravation... just not worth it... unless the customer asks and pays for it.

    client wants a mercedes but has a buick budget... what do you do?
    In a situation like this, the obvious thing to do is what you work fastest in. For you at this time it was tables, but for me it's CSS 99.9% of the time since that's what I work fastest in. If you improve your CSS skills (and your skills may not even need "improvement" per se, but you might start building CSS layouts faster as time goes on), the choice may not be as clear cut anymore.

  12. #12
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Los Angeles
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by will_
    Trying to replicate table-based layouts with CSS is one of the main things that keeps die-hard table users from switching to CSS. They are unable to replicate a complex nested table layout in CSS with pixel-perfect precision, so they give up and write off CSS as being not powerful enough, or too hard, or not cross-browser, or all of the above.

    If you forget everything you know about tables, then approach CSS with a fresh-slate attitude, you will likely have much better success.
    Now this is a great example of what I hear most. And (forgive me if I pick on you a little here, it's all for posterity, I promise...) in general you have a very valid argument. BUT, and this is a big BUT, this does nothing to help solve the problem of producing a layout that is as usable as the sitepoint forums front page (see my earlier post...). You can feel free to preach the gospel that is CSS to me all you want, but realize, I already agree with you. It's not a question of CSS vs tables in theory, but rather in practice. Help me find a way to do this, don't just tell me it's possible. I've tried and tried, and I'm pretty much sold on the idea that it's going to have to be a mix between tables and CSS (which I don't have a problem with, but shouldn't there be a way?).

    I'm in no way set on replicating this style of design either. If someone could show me an example of a better way to have all the same information and data represented in some sort of layout that is absent of tabular type data, please let me know. I'm all ears. The sad fact of the matter is though, it doesn't look like it's possible.

    Hmm... maybe I should give away a prize or something. Any ideas? $50 Amazon.com gift certificate maybe?

  13. #13
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What to say...

    There are many reasons why table-less, CSS-based design can be called hard, and people saying that it isn't are in my humble opinion representing the various real-world issues CSS-based design still has in a simplified manner.

    That said, it is now generally accepted that table-less, CSS-based design has real advantages over table-based design (as long as no tabular data is concerned), but there are a number of factors that hinder people from "makin' da move" (yo):
    1. The "no time, boss is breathing down my neck" argument.
      Contrary to what was stated earlieron, this argument pops up all over the place in the various CSS vs. tables discussions. It can be a very valid argument, but often it is mainly based on:
    2. Lack of skills.
      When you've been building layouts with tables for years and have just started using CSS, all too often going back to tables seems so much easier and quicker (see 1!) than battling it out with floats and abs pos.
      Then again, tables are just tools (old, rusty ones) in the developer's tool box, just as the various CSS techniques are, but if you haven't learned to use them properly yet, the obvious tendency would be to put them away and use the old ones again.
      Then again, if you never use them, you will never learn to, either.
    3. There are no clean-cut solutions to one-on-one convert a table-based layout to a CSS one.
      True. The nature of CSS layout techniques is fundamentally different from the approaches common to using tables; that's why a one-on-one conversion will usually fail. Either a step by step, iterative process or a complete rebuild from the ground up will get better results.
      Also, since there are a number of different approaches to CSS layouts, each with their own specific pros and cons, it is hard to choose one without knowing the importance of those pros an cons to the site at hand. Furthermore, lacking browser support and implementation bugs often require special treatment, which unnecessarily but inescapably adds to the confusion and steepens the learning curve.
    The bottom line in my opinion is: because of the benefits, depending on your skills and the time given try and use as much CSS and as few - inapproriate - tables as possible and feasible, and try whenever possible to expand your knowledge of an experience with CSS.
    Regards,
    Ronald.

  14. #14
    SitePoint Addict will_'s Avatar
    Join Date
    Apr 2004
    Location
    Asheville, NC
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by infect
    BUT, and this is a big BUT, this does nothing to help solve the problem of producing a layout that is as usable as the sitepoint forums front page (see my earlier post...).
    No offense taken - I understand your point. I think it was my fault for not responding directly to what you were talking about. After pondering what you were saying, I think I agree with you.

    To reproduce the front page of the forum layout in CSS would be to venture into "div-itis" and "class-itis" land. You would have to make so many divs and classes, it would probably render the point of separating style from structure useless, and could be just as big a mess as a completely table-based layout.

    So, i think I would agree that a mix of tables and CSS is best in this case. Mostly because it could be argued that the information presented IS tabular data, which as we all know by now, is what tables were originally for.

    And this is why we have the transitional document definition in XHTML.

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought maybe lists would help, but the columns won't line up. For posterity, here's what I tried:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--<meta http-equiv="refresh" content="15" />-->
    <title> </title>
    <style type="text/css">
    body {font-family: Arial, Helvetica, Sans-serif; font-size: 14px; background: #fff; color: #000; }
    img {border: 0; }
    .forumtype {background: #003366; color: #fff; font-size: 16px; font-weight: bold; 
    		padding: 2px; margin: 0; vertical-align: middle; }
    .forumsponsor {text-align: right; }
    .forumlist {background: #EBEFF4;  }
    .forumlist2 {background: #DBE2ED;  }
    
    .forumlist ul {list-style-type: none; margin: 0; padding: 0.5em 0 0.5em 0; border: 1px solid #fff; }
    .forumlist li {display: inline; border-right: 1px solid #fff; margin: 0; padding: 0.5em 1em 0.5em 1em; font-size: 14px; }
    .forumlist li img {vertical-align: middle; }
    
    .forumlist2 ul {list-style-type: none; margin: 0; padding: 0.5em 0 0.5em 0; border: 1px solid #fff; }
    .forumlist2 li {display: inline; border-right: 1px solid #fff; margin: 0; padding: 0.5em 1em 0.5em 1em; font-size: 14px; }
    
    
    
    </style>
    
    </head>
    <body>
    <div class="forumtype">
    	Design Your Site
    	<span class="forumsponsor">
    		Proudly Supported By <img src="onsmartsmall.gif" width="100" height="28" alt="onsmartsmall.gif">
    	</span>
    </div>
    
    <div class="forumlist">
    	<ul>
    		<li><a href="">Just Starting Your Design</a> (4 Viewing)</li>
    		<li>30,514</li>
    		<li>4,366</li>
    		<li><a href="">PDF versus word</a> Today 08:21 (Mongoloid)</li>	 
    		<li><a href=""><img src="lastpost.gif" width="14" height="14" alt="lastpost.gif"></a></li>
    	</ul>
    </div>
    
    <div class="forumlist2">
    	<ul>
    		<li><a href="">Just Starting Your Design</a> (4 Viewing)</li>
    		<li>30,514</li>
    		<li>4,366</li>
    		<li><a href="">PDF versus word</a> Today 08:21 (Mongoloid)</li>	 
    		<li><a href=""><img src="lastpost.gif" width="14" height="14" alt="lastpost.gif"></a></li>
    	</ul>
    </div>
    
    <div class="forumlist">
    	<ul>
    		<li><a href="">Just Starting Your Design</a> (4 Viewing) asdfsaf sadfsadf</li>
    		<li>30,514</li>
    		<li>4,366</li>
    		<li><a href="">PDF versus word</a> Today 08:21 (Mongoloid)</li>	 
    		<li><a href=""><img src="lastpost.gif" width="14" height="14" alt="lastpost.gif"></a></li>
    	</ul>
    </div>
    
    <div class="forumlist2">
    	<ul>
    		<li><a href="">Just Starting Your Design</a> (4 Viewing)</li>
    		<li>30,514</li>
    		<li>4,366</li>
    		<li><a href="">PDF versus word</a> Today 08:21 (Mongoloid)</li>	 
    		<li><a href=""><img src="lastpost.gif" width="14" height="14" alt="lastpost.gif"></a></li>
    	</ul>
    </div>
    
    
    </body>
    </html>
    Probably better off with tables, or maybe a series of left-aligned divs

    Good luck with it.
    -Rich

  16. #16
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Los Angeles
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rich, I think you just might be getting somewhere. Would it be possible to affix each column to a specific percentage width? Perhaps assign each <li> it's own specific class with a width constraint?

    I'm playing around with it now, let me know what you think.

  17. #17
    SitePoint Addict picasso-trigger's Avatar
    Join Date
    Dec 2003
    Location
    somewhere out there
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a nice contact form layout... this is worth the effort...

    http://www.alistapart.com/articles/practicalcss/

    i still know tabular data belongs in tables... either load the whole table... or none of it. that's their use.
    _________________________

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by infect
    Rich, I think you just might be getting somewhere. Would it be possible to affix each column to a specific percentage width? Perhaps assign each <li> it's own specific class with a width constraint?.
    I played with this some more. LI don't seem to pay any attention to width, but UL do. Odd since they are both block level elements, eh? So I tried a list within a list technique... but UL also don't listen to width when you set "display: inline" on them (which makes sense). I've given up. My last gasp looked like this below. It doesn't work in IE yet and is shaky at best (though kind of novel I thought):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--<meta http-equiv="refresh" content="15" />-->
    <title> </title>
    <style type="text/css">
    body {font-family: Arial, Helvetica, Sans-serif; font-size: 14px; background: #fff; color: #000; }
    img {border: 0; }
    
    .list {background: #EBEFF4;  }
    .list2 {background: #DBE2ED;  }
    
    
    ul {margin: 0; padding: 0; display: inline; float: left; list-style-type: none; }
    li {margin: 0; padding: 10px; border: 1px solid #fff; min-height: 50px; max-height: 50px; }
    
    </style>
    
    </head>
    <body>
    
    <!-- columns are:    Forum / Posts  / Threads /  Last Post  -->
    
    <!-- first column: Forum  -->
    	<ul>
    		<li class="list"><a href="">Forum 1</a> (1 viewing)</li>
    		<li class="list2"><a href="">Forum 2</a> (1000000 viewing)</li>
    		<li class="list"><a href="">Forum 3</a> (1000 viewing)</li>
    	</ul>
    <!-- second column: Posts -->
    	<ul>
    		<li class="list">50,000</li>
    		<li class="list2">1,000</li>
    		<li class="list">1,000,000</li>
    	</ul>
    <!-- third column: Threads -->
    	<ul>
    		<li class="list">5,0000</li>
    		<li class="list2">100</li>
    		<li class="list">100,000</li>
    	</ul>
    <!-- fourth column: Last Post -->
    	<ul>
    		<li class="list"><a href="">CSS Sux!</a><br />Time 12:22pm</li>
    		<li class="list2"><a href="">Forum 2 Sux!</a><br />Time 12:22pm</li>
    		<li class="list"><a href="">Forum 3 Also Sux!</a><br />Time 12:22pm</li>
    	</ul>
    
    
    
    </body>
    </html>

  19. #19
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Los Angeles
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I pretty much tried the same thing. And you're right, it's shaky at best. I particularly think it's kind of annoying how it degenerates when the sizes become awkward or when text is longer than in other boxes. So even when I thought I had stumbled onto something useful, it would keel over and die when the window was shrunk past a certain point.

    ... and the war rages on...

    I think I'll try a new approach. I feel like we're verging on something here.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I don't mean to butt in here but you can float a list which will slightly resemble a table like so:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test list laid out as table</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {font-family: Arial, Helvetica, Sans-serif; font-size: 12px; background: #fff; color: #000; }
    img {border: 0;}
    ul.header {background: #003366; color: #fff; font-size: 16px; font-weight: bold; 
    padding: 2px; margin:2px 0; line-height:30px; }
    ul {
    list-style:none;
    margin:0px;
    padding:0px;
    }
    li {
     
    line-height:30px;
    margin:0;
    padding:0;
    }
    li.item1, li.item2,li.item3,li.item4,li.item5,li.item6 {
    margin-right: 1%;
    width: 24%;
    float:left;
    border-right: 1px solid #fff;
    }
    li.item2 {width:5%}
    li.item3 {width:5%}
    li.item4 {width:32%}
    li.item5 {width:5%}
    li.item6 {width:auto;border:none;}
    .listbox {
    clear:both;
    width:100%;
    margin-bottom:2px;
    }
    .odd {background: #EBEFF4; }
    .even {background: #DBE2ED; }
    </style>
    </head>
    <body>
    <ul class="header">
    <li>Design Your Site Proudly Supported by <img src="onsmartsmall.gif" width="100" height="28" alt="onsmartsmall.gif" /></li>
    </ul>
    <div class="listbox odd"> 
    <ul>
    <li class="item1"><a href="">Just Starting Your Design</a> (4 Viewing)</li>
    <li class="item2">30,514</li>
    <li class="item3">4,366</li>
    <li class="item4"><a href="">PDF versus word</a> Today 08:21 (Mongoloid)</li>
    <li class="item5"><a href="">last</a></li>
    <li class="item6"><a href="#">......</a></li>
    </ul>
    <br style="clear:both" />
    </div>
    <div class="listbox even"> 
    <ul>
    <li class="item1"><a href="">Just Starting Your Design</a> (4 Viewing)</li>
    <li class="item2">30,514</li>
    <li class="item3">4,366</li>
    <li class="item4"><a href="">PDF versus word</a> Today 08:21 (Mongoloid)</li>
    <li class="item5"><a href="">last</a></li>
    <li class="item6"><a href="#">......</a></li>
    </ul>
    <br style="clear:both" />
    </div>
    <div class="listbox odd"> 
    <ul>
    <li class="item1"><a href="">Just Starting Your Design</a> (4 Viewing)</li>
    <li class="item2">30,514</li>
    <li class="item3">4,366</li>
    <li class="item4"><a href="">PDF versus word</a> Today 08:21 (Mongoloid)</li>
    <li class="item5"><a href="">last</a></li>
    <li class="item6"><a href="#">......</a></li>
    </ul>
    <br style="clear:both" />
    </div>
    <div class="listbox even"> 
    <ul>
    <li class="item1"><a href="">Just Starting Your Design</a> (4 Viewing)</li>
    <li class="item2">30,514</li>
    <li class="item3">4,366</li>
    <li class="item4"><a href="">PDF versus word</a> Today 08:21 (Mongoloid)</li>
    <li class="item5"><a href="">last</a></li>
    <li class="item6"><a href="#">......</a></li>
    </ul>
    <br style="clear:both" />
    </div>
    </body>
    </html>
    Although a table will be valid for this kind of data and was exactly what it was supposed to be used for.

    Hope that gives you some more ideas anyway

    Paul

  21. #21
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In CSS sans-tables, your parents affect your width and your children affect your height.

    In tables, the same holds except that inside a table your height and width are both affected by your siblings.

    This is both the advantage (easy to do equal height columns) and the disadvantage (the browser needs to know what is in all the cells before it can render the table) of using tables.

    The natural way for doing tables is an everything-affects-everything layout on the sibling level, while in a CSS based layout the natural setup is more complicated. Things in the same flow affect eachother, but things in different flows have no effect on things in other flows. This is why replicating table layous can get difficult, because you have to fake the everything-affects-everything setup by putting everything in the same flow, which makes things difficult and less reliable, especially in IE where you cannot depend on width (it is treated more like the widths of table cells rather than what the specs say).

    The thing is, complicated flows and multiple flows are difficult to do in tables, which is why they are only slowly being explored in CSS, where they are much easier. Complicated flows appear to be the most looked at at this satge, which is what you are trying to do here.

    Using ul elements for the design do not make sense here; the same reasons not to use tables for layout apply to using unordered lists for table layouts.

    When you say "fourth column: Last Post", you should really be saying <th>Last Post</th>.

    Douglas
    Hello World

  22. #22
    SitePoint Addict picasso-trigger's Avatar
    Join Date
    Dec 2003
    Location
    somewhere out there
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DougBTX
    Using ul elements for the design do not make sense here; the same reasons not to use tables for layout apply to using unordered lists for table layouts.
    i couldn't agree more.

    you might as well ban the table tag from HTML!

    there are skills and then there is the abillity to know which skill will accomplish the task best. i just learned how to use a hammer, so know i'll hammer in all my screws because screwdrivers soooo lame.

    tabular data (spreadsheet data, recordsets etc...) belongs in tables.

    when you learn new things, you don't throw away everything else... you ad to what you know, and remove from what you knew that no longer is true. the abuse of tables all these years was to get around the rigid nature of HTML... it doesn't mean tables in every use are always inefficient and not proper.
    _________________________

  23. #23
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I don't mean to butt in here but you can float a list which will slightly resemble a table like so:
    Right, I tried that too. That way breaks when the text runs over one line. It's just as well. It's tabular data and should be placed in a table anyway. It just looked to me at first like it could be done very simply with CSS only so I took a few stabs. Nothing ventured, eh?

  24. #24
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by boringguy
    Nothing ventured, eh?
    I say go ahead and try and get it to work anyway. You'll learn something for sure, and you might even come up with something useful for everyone somewhere else.

    Just because someone says you shouldn't really be doing something some way, doens't mean don't do it, it just means make sure you are aware of the situation.

    Once you get your head firmly around floating lists, and floating in general, you are up there with the hottest stuff in CSS, you just need to learn how to apply it then. And where best to apply it

    Douglas
    Hello World

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by boringguy
    That way breaks when the text runs over one line
    Yes but it all holds together like a table even when the line breaks - did you try my code?. Unlike yours the end column doesn't wrap to the beginning and lose its meaning. The only problem with the layout is the internal borders wont be full height on the non wrapping elements - otherwise its much the same as a table.

    I only did it for fun anyway as mentioned above this is not what css was designed for and a table is more appropriate in this case.

    Paul
    Edit:


    Its here if anyones still interested.
    http://www.pmob.co.uk/temp/listtable3.htm


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
  •