Best Practice: Table, Div, List or some combination...?

Question

I have a simple datatable with less than 100 rows. I've currently been displaying the data in a series of nested DIVs. Each row has a container div, with nested divs representing the columns of data within it. (This was in reaction from my earliest coding days when there wasn't anything like a div).

The first column of data is formatted as an image link, while the other two columns are text.

Does it make sense to return to using a table?

Also, as an experiment, I'd thought about using nests ULs. An UL to contain all the rows, and a separate horizontal UL for each row.

As a further note/question, I have another block of data that can result in thousands of rows. Would that amount of data result in a different answer for 'best practice' in this case?

Equisetum

a browser handles large row counts if you put the table elements in the correct order <table><thead/><tfoot/><tbody/></table> – Pneumonectomy

Answer 1

Realistically, you can use any container you'd like. Best practice is to use the elements for what they were meant to be used for. If you are displaying tabular data, by all means use a table! There are great plugins to make the experience for the user better, and it's really easy to read and copy/paste.

The question that I always ask myself is if that data would be best shown in a Word or Excel file. If Excel, then it's a table. If Word, it's div's.

If you're using thousands of rows you'll probably want to give the user control on sorting, filtering, and pulling in more information to aid usability. I'd use a table with some jQuery plugins like tablesorter, hovertable and tableFilter to help make this easy.

Chokebore

I marked this as the 'correct' answer as I also liked the analogy. – Equisetum

You can have tabular data in Word, though... :) Either way, the analogy does make the point. – Byrdie

Answer 2

In this case a table is fine. Tables are for displaying tabular data, like a row in the db. You should avoid using tables for page layout though....

As for having thousands of rows, you may want to look into pagination. I don't think there is a better "best practice"

Talaria

Answer 3

lists are for one dimension data. tables are for more than one dimension data. divs are to separate things or include something in others. if each item of your data has a relation of owner to some others you should use table.

Electrophilic

Answer 4

Lists are for lists, tables are for tabular data, and divs are for layouts. So if you want to go the best practices route; I think you should be using a table here.

That being said; using divs as opposed to tables isn't all that bad. I wouldn't worry about rewriting if you're already using divs instead of a table. The one caveat being you're clearing your floated column divs. ex:

<div class="row">
  <div class="column" style="float:left;"><!-- Some stuff --></div>
  <div class="column" style="float:left;"><!-- Some stuff --></div>
  <div class="column" style="float:left;"><!-- Some stuff --></div>
  <div style="clear:both;"><!-- Leave empty --></div>
</div>

What you should avoid is the opposite (using tables where divs should be used).

Also, even though you may be able to get some kind of table structure using list elements, this is NOT the route you want to go. I've never done it before...to be honest out of the hundreds of examples I've looked at I don't think I've ever seen anyone use them for such a purpose. I guess the best reason here is why would you? Since I've never seen it before I don't have any examples handy which illustrate why you shouldn't do it. But to me this is akin to telling someone not to use a pipe to loosen a bolt when they have a wrench handy. I mean sure....maybe the pipe could get the job done but the wrench is right there...

Derrek

I appreciate you going out of your way to add code as an example. My code is similar to your example, with the exception being that the "row" class clears the float. – Equisetum

Adding the clear shouldn't change the way things look. Doing so avoids floating bugs in IE7 where the css float property isn't handled properly and goes to other parts of the document. So, for example, making tables like this; not having an empty clear div could cause elements under your table to float - even though you didn't want them to. – Derrek

Answer 5

If I need to show data in a table liked manner I mostly use the <table> element. You should think about user friendliness when showing a 1000 rows or more. The jqGrid plugin is good solution for that and has features like paging, sort, search, etc.

Scalawag