Simulating a Table Using an Unordered List

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:

About these ads

22 Comments on “Simulating a Table Using an Unordered List”

  1. qryss says:

    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

  2. [...] Simulating a Table Using an Unordered List [...]

  3. Ram says:

    Thanks for help. somthing exactly i am looking for.

  4. Layla says:

    This was awesome; thank you.

  5. [...] Simulating a Table Using an Unordered List 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. [...]

  6. [...] Simulating a Table Using an Unordered ListYour 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. [...]

  7. Kevin C says:

    Tables can resize and fit content automagically. How do I do that with DIVs?

    • Tim Knight says:

      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.

  8. [...] Simulating a Table Using an Unordered List 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. [...]

  9. [...] 用无序列表模拟一个表格 [...]

  10. [...] Simulating a Table Using an Unordered ListYour 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. [...]

  11. RC says:

    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!

  12. George says:

    It was very useful … Thanks

  13. [...] Simulating a Table Using an Unordered List 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. [...]

  14. Lee Taylor says:

    What an extraordinary piece of software!! Well conceived.

    Have created a “css” file with 5 columns, …_col1 thru …_col5, each 18% as it needs to be < 100% due to borders, inside a "wrapper" of whatever width. Can now in the "html" page, make it scalable from 1 to 5 columns, modifying the width %.

    Am in the process of rewriting my current website using "Tabs" & now incorporating "your" CSS Table!!!

    Thanks for the gift.

    Lee

  15. [...] Simulating a Table Using an Unordered List 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. [...]

  16. ianf says:

    All dandy, only your left-out “clearfix solution as given
    at: http://www.positioniseverything.net/easyclearing.html
    is no longer there, server kaputt (I presume it could be
    extracted from the page source, but still);

    The solution is nice enough, but it is not a TABLE that
    you are simulating with DIVs wrapped inside LIst items,
    but a limited instance of such that should be called one-
    line-cell SPREADSHEET. By definition HTML tables may
    contain multi-line cells; cells may span horizontally AND
    vertically, columns and rows, which your solution could
    not do.

    Lastly, why is the ID of the UL item called “sortable_list”?
    It’s nowhere near sortable, alas.

    • Tim Knight says:

      Thanks for telling me about the link, seems it’s missing a : within the URL syntax, I’ll correct that.

      Yes, you are right this is a spreadsheet of information and isn’t something that supports all of the styles that an HTML table would do, but I think defining a spreadsheet, which is a data table, as not a table of data is purely semantics.

      As far as the ID, the code sample was taken from a project I was working on at the time (about 5 years ago, if the post date is correct) and as I outlined in the first paragraph the only reason I wanted to code this solution using DIVs was to create something like a sortable list. While the post doesn’t go into how to make the items sortable, it was a “step 1″ in my process.

  17. ianf says:

    Thank you, I wasn’t expecting (never mind this
    speedy) a response for a comment on a 5 year
    old article. Only, having spent the best part of
    a week searching the web for a cross-browser
    workable, adaptive/ “fluid” full-featured table
    replacement technique with CSS/ limited JS,
    and coming nowhere near a solution, I have
    to admit to a dose of frustration.

    It’s like the web development hasn’t moved any
    since the early days of modern/ CSS-aware
    browsers 10+ years ago. Just a single one of
    the umpteen CSS-styled table examples I’ve
    come across has sported multi-line/ graphical
    element cell capability (http://goo.gl/iIR6D – also
    this done with list elements). Every other one,
    esp. the searchable table samples were all
    short-token-single-line-cells spreadsheets with
    fancy colors. ‘Cause colors are the BIG DEAL.

    I keep thinking that the wonderfully simple to
    code, and runtime-resolve tables appeared
    mere couple of years after the first Mosaic,
    in late 90s, and now the entire web industry
    cannot come up with a viable, semantically-
    correct, fully-functional tables replacement
    for another 15?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.