NOTE: It should be said that semantically correct HTML should always be used in favor of <div> craziness. This is meant more as a proof of concept.
Your first question immediately might be, “why would I want to simulate a table with a list, why not just use a table?” With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. So let’s get started.
First let’s look at our HTML:
Now the CSS:
Ok – I’ve left something out for space. I also implement the clearfix solution as given at: http://www.positioniseverything.net/easyclearing.html
I’ll keep this post short, because I’m expecting that you can figure out everything that was done by the HTML and CSS. Hope it helps someone somewhere to do something cool.
Result:
Hi there,
This is great (and thanks, therefore!) but unfortunately does not address my concerns!
I need to be spitting out “table” rows dynamically but can’t use tables because sections of the “table” are grouped with an accordion.
So I’m trying to find a way to do it with non-table CSS.
Your method is great but the layout breaks if some of the cell data flows into two or more lines!
What I am trying to build is a way to have the “rows” expand if one “cell” is taller than one line.
Any clues on this..?
:)
qryss
Thanks for help. somthing exactly i am looking for.
This was awesome; thank you.
Tables can resize and fit content automagically. How do I do that with DIVs?
Kevin, I would say that while table columns do automatically resize, that in most cases at least stating width in a percentage to ensure longer cells for one column relative to the other columns is pretty common. While you can’t directly adjust div widths dynamically without JavaScript (as far as I’m aware), you could still set a div’s width with a percentage just as you can with a table column. But in cases of actual tabular data remember that tables work just fine.
Hi Tim,
Can’t believe that a post from 2007 helps me in a project in 2010. Thanks a bunch for this post!
I needed to create a ‘timetable’ widget. Basically a table when each row will have different number of columns, with a different column width. A TV Guide widget.
Thanks again!