What is your opinion on the trend towards tableless CSS designs, and the idea that all formatting should be removed from the content.

I use some css for site design, but sometimes find the pressure to use all CSS can drag out completion time in order to hack my way around browser limitations.

If you would share your well-qualified opinions, I would be most appreciative.

if you use div boxes it's great you can't create a design based on tabels for my opinion

I'm sure that in the long run, css will always be better and more efficient. Using divs can achieve the same exact effect as tables.

Originally Posted by jetinter

trend towards tableless CSS designs, and the idea that all formatting should be removed from the content.

You know, I never really thought of Accessible CSS layouts being a trend. I suppose it does satisfy the definition though.

Originally Posted by jetinter

I use some css for site design, but sometimes find the pressure to use all CSS can drag out completion time in order to hack my way around browser limitations.

You'll have to define "some css", because that really doesn't make sense. Are you saying you define some elements with css selectors and define their attributes via css, and other elements with inline HTML tags?

Anyway, I don't see CSS taking any longer than what inline HTML used to take me, in fact it takes less time because I'm globally assigning attributes instead of typing redundant in-line styles.

When I first started using CSS it took me longer, but as I learned more and understood more my turnover time quickly dropped as I gained more experience.

There are multiples of reasons why CSS box models are better for layout than table-based designs. Just to name a few:
1. CSS sites are faster. The CSS is cached by your browser, causing it to already have all the rules for layout stored in its memory when it needs to load an otherwise unfamiliar page. Not to mention the fact that seperated styles means much leaner HTML markup on the page. This leads to my second point:
2. Seperation of styles and content means leaner HTML markup on the content page. This isn't better only because it is faster (it is), but because lean code is not only easier to work on and easier to read, it is better for usage with Javascript DOM traversal and libraries, is easier to create dynamic content for with server languages such as PHP, and is all around a much more efficient model for creating flexible, professional webpages.
3. CSS sites are easier to update. It goes without saying that if multiple styles are kept in a central location, changes in color preferences, widths, borders etc, are very easy to do, as they can be done from one file. This makes the old cut-and-paste, and search-and-replace of yesteryear seem quite ridiculous by comparison.
4. Although mentioned somewhat in #2, I thought it deserved its own number: CSS plays very nicely with Javascript. Lots of cool behaviors are not possible in UI design without at least moderately advanced knowledge of CSS. CSS makes the behavior of websites using Javascript a pleasure.
5.... fill in the blank.... Table based layout, though still hanging on by an archaic thread, is a part of the past. CSS is the present and the future. Anyone that is not on board will be left behind.

Here's an excellent presentation on why you should not use tables for layout:
Why tables for layout is stupid....

I'm amazed that this conversation still comes up. I won't go into the benefits of an all css layout over a table-based layout. Abel offered some good reasons and the article on the other side of the link LnR posted has more.

However what I will say is if css is dragging out your completion time it's simply that you haven't taken the time to learn to use css to layout a site. There's a learning curve and in the beginning when you're first working to create all css layouts after having used tables it might take you longer. But it's not because of the css.

I've been using css to layout my sites since shortly after I started building sites and if anything it's a lot faster than building them with tables. The issue isn't the css. It's that right now you're more familiar with using tables for layout. If you spend the time to get over the learning curve you'll see that css doesn't slow down development time at all. It speeds it up.

Agree 100% with Vangogh

You might also take a look at this tutorial, it may help you break out of the table-layout frame of mind: www.cssslicingguide.com

I'll also recommend Eric Meyer's book Eric Meyer on CSS. In the book he takes a few layouts that have been coded using tables and works through each until they're coded completely as a css layout. After reading the just that book I started building css driven sites.

Eric's full site is http://meyerweb.com/

I cheat. You can make tableless tables. Using div's with a class name of what you'd normally called a table, tr, td etc... Here:


html

   <div class="table">
    <div class="th">
     <div class="td">Name</div>
     <div class="td">Phone</div>
     <div class="td">City</div>
     <div class="td">State</div>
     <div style="clear: both;"></div>
    </div>
    <div class="tr">
     <div class="td">Clark</div>
     <div class="td">785-555-0303</div>
     <div class="td">Smallville</div>
     <div class="td">Kansas</div>
     <div style="clear: both;"></div>
    </div>
    <div class="tr">
     <div class="td">John</div>
     <div class="td">785-555-0303</div>
     <div class="td">Smallville</div>
     <div class="td">Kansas</div>
     <div style="clear: both;"></div>
    </div>
    <div class="tr">
     <div class="td">Martha</div>
     <div class="td">785-555-0303</div>
     <div class="td">Smallville</div>
     <div class="td">Kansas</div>
     <div style="clear: both;"></div>
    </div>
   </div>

css

 .table {
 width: 100%;
 border: 1px solid #f00;
}
.table .th {
 background-color: #f00;
 color: #fff;
 font-weight: bold;
 border-bottom: 1px dotted #f00;
}
.table .tr:nth-child(odd) {
 background-color: #eee;
}
.table .td {
 float: left;
 width: 23%;
 padding-left: 2%;
}

I learned it from this guy:
http://www.bernzilla.com/item.php?id=134

And here is what it looks like:
http://www.bernzilla.com/design/tables/table.html


And it is pure css. No table tags or tr tags etc...
This allows me to use my normal 'table logic thinking' but create tableless sites without all the extra time involved.

I'm not a css guy so I take the shortcuts

There is absolutely NO POINT in all that mess, I'm sorry. Besides the mess of divs, there are other ways to achieve that type of layout without tables OR all those divs. Look up Definitition Lists... or even a plain unordered list would work.

I cheat. You can make tableless tables. Using div's with a class name of what you'd normally called a table, tr, td etc...

Later this year, I am going to relay out one of my mockups using only <ul> and <li> elements, just to show that it can be done. Although pointless, it is not quite as pointless as making divs behave like tables, then using them for layout. Kind of a self-defeating philosophy if you ask me.... But what do I know?

Originally Posted by LadynRed

There is absolutely NO POINT in all that mess, I'm sorry. Besides the mess of divs, there are other ways to achieve that type of layout without tables OR all those divs. Look up Definitition Lists... or even a plain unordered list would work.

Originally Posted by wayfarer07

Later this year, I am going to relay out one of my mockups using only <ul> and <li> elements, just to show that it can be done. Although pointless, it is not quite as pointless as making divs behave like tables, then using them for layout. Kind of a self-defeating philosophy if you ask me.... But what do I know?

Like I said in my post, I'm not a css guy, but that is a tableless layout. If the above is such a mess, please enlighten me and post the 'correct' way to make a tableless table with the same user data above.

The truth is, the data that you represented above properly belonged in a table, so there was nothing necessarily right about making a div behave like a table just to be "tableless". Tables are great for tabular data, as that is what they were originally intended to hold.

Making an entire website without the use of tables is a rather large discussion. I suggest you start here: http://www.alistapart.com/articles/practicalcss/

the alistapart article and all pages it links to in the article are informative for creating a css tables layout, but still nowhere does it show an actual example of implementing structured tabular data in a css (non-table) format.

I apologize if I've gotten us off topic here.

Originally Posted by wayfarer07

The truth is, the data that you represented above properly belonged in a table, so there was nothing necessarily right about making a div behave like a table just to be "tableless". Tables are great for tabular data, as that is what they were originally intended to hold.

Making an entire website without the use of tables is a rather large discussion. I suggest you start here: http://www.alistapart.com/articles/practicalcss/

Sorry I didn't entirely read what you had wrote. I also believe tabular data should be in tables. But now that we've pretty much ventured into a completely tables site, I pose the question: how would you show tabular data in a css format without actually using tables (and since my example above is labeled messy, how can it be done).