homepage Welcome to WebmasterWorld Guest from 54.166.128.254
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Is it possible to replace a table with css and div's?
jamesw

5+ Year Member



 
Msg#: 3964284 posted 8:15 pm on Aug 2, 2009 (gmt 0)

I really don't think that what I am wanting to do is possible but if someone fancies a challenge then please feel free to advise. I have just about given up trying but thought I'd ask here in one last attempt to get a table replaced with CSS styling

Using strict XHTML with an external style sheet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">

I have some rather complex Ruby on Rails code that needs to display some data in a tablular format tha tI have somewhat simplified down to its basic elements here.

The thing is that I am looping through a set of records and I need to wrap the contents of each field in a div in such a way as all the div's line up without having to multiply the number of times I loop by the number of columns I have.

sounds simple enough but I'm tearing my hair out over this

A pseuodo coded example

<ul>
<%= for each record in records do %>
<li>
<%= record.name %>,
<%= record.street %>,
<%= record.town %>,
<%= show_links %>
</li>
<% end %>
</ul>

would display something like

Harry, Cowper Street, Cheltenham, show edit destroy
Joe, Frederick Court, Leeds, show edit destroy
Christine, Barlow Avenue, Glasgow, show edit destroy

When what I want is


Harry, Cowper Street, Cheltenham, show edit destroy
Joe, Frederick Court, Leeds, show edit destroy
Christine, Barlow Avenue, Glasgow, show edit destroy

So that the columns line up to the widest content.
(Sorry I can't get it to line up in here either :-), Hope you get the idea!)

Obviously a table would do this for me

<table>
<%= for each record in records do %>
<tr>
<td
<%= record.name %>,
</td>
<td>
<%= record.street %>,
</td>
<td>
<%= record.town %>,
</td>
<td>
<%= show_links %>
</td>
</tr>
<% end %>
</table>

But I would love to be able to wrap each field in a div rather than a table cell


<%= for each record in records do %>
<div class = "col1">
<%= record.name %>,
</div>
<div class = "col2">
<%= record.street %>,
</div>
<div class = "col3">
<%= record.town %>,
</div>
<div class = "links_col">
<%= show_links %>
</div>
<% end %>

I obviously would need to float div 1 and clear left (i thnk) and a may even need some containing divs but no matter what I try I can't seem to get this to work.

I know I could loop through the records for each field to create a four columns but that is not suitable for my requirements.

I also don't know how many fields I will have or how many records I will have (this is determined at runtime) so everything needs to be positioned relatively.

Weeks of searching have lead me to all sorts of how to's but they all rely on the contents of each column being placed in one go which is obviously not possible to do here.

Is this actually possible to do at all or will I HAVE to use a table? AND if it is possible to do I would love it if you could share the styling with me.

Thank you for reading

James

 

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3964284 posted 8:38 pm on Aug 2, 2009 (gmt 0)

Since you have a classic example of tabular data, there is _no_ reason not to use a table IMHO.

There are values of the display property if the html (or the xml if you're styling that) doesn't use tables that can help to display other elements as if they were tables:

table
inline-table
table-row
table-row-group
table-header-group
table-footer-group
table-column
table-column-group
table-cell
table-caption

But for HTML: I'd not use them to avoid tables used for tabular data, and I'm not sure legacy IE versions support this at all.

[w3.org...] has more info on this.

jamesw

5+ Year Member



 
Msg#: 3964284 posted 10:21 pm on Aug 2, 2009 (gmt 0)

Thank you,
I guess that I can use tables for the minuite and if I come up with something else I should be able to change it later.

jcopley

5+ Year Member



 
Msg#: 3964284 posted 3:04 am on Aug 3, 2009 (gmt 0)

Speaking as someone who has torn plenty of hair out trying to move from tabular to CSS layouts, I submit that if you have tabular data, it is perfectly appropriate to put it in a table. Why would you want to do otherwise?

It's true that you have to add some extra HTML coding to the table to style it effectively in CSS. But still.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3964284 posted 12:51 pm on Aug 3, 2009 (gmt 0)

It's true that you have to add some extra HTML coding to the table to style it effectively in CSS. But still.

What do you need in the html that can't be done in CSS?

All I ever use is <table class="xyz">, no layout whatsoever in the html, except sometimes a colspan or rowspan on a cell (but they aren't just layout, if you have a colspan you also have less cells in that row (and if the table is a data table that's partly content at least)

jamesw

5+ Year Member



 
Msg#: 3964284 posted 2:21 pm on Aug 3, 2009 (gmt 0)

I'm not entirely sure why I don't want to use tables for this.
I guess it boils down to a number of reasons all of which may be misconceptions

1) I've never used tables before so it's not a natural solution for me intuitively speaking.

2) I am under the impression that tables have performance/bandwidth issues

3) I already have the styling inheritance sorted out for id's and classes in my my css file and adding one more set of styling is just one more thing to worry about from a point of view of testing to make sure my layouts don't break.

4) Most importantly it's a heck of a lot more work and complicates the themes maintenance I have for my CMS.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3964284 posted 3:10 pm on Aug 3, 2009 (gmt 0)

The big advantage of a table is that the cells have both row and column relationships and unless you get it back using the table display settings, there is not really an easy option in CSS to have similar interaction between content and a "grid".

Now legacy IE (if you care about it) will not do display:table-* and hence I don't know a way for it to have your cells all the same width without fixing the width to a static value.

Content wise it's a table, so the purists will want to see a table tag in the html as well.
Styling tables is relatively decent cross-browser, just know that Microsoft cheated with the algorithms to do border conflict resolution in collapsed border mode (they do not give priority to "hidden").

lewisac

5+ Year Member



 
Msg#: 3964284 posted 6:39 pm on Aug 3, 2009 (gmt 0)

Save yourself the pain and use a table in this situation. Tables are easy to understand, fast to code, simple to maintain, and totally consistent across browsers. Since you're representing actual tabular data, there's no reason not to leverage tables.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved