w s w s - 28 days ago 7
HTML Question

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

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?

Answer Source

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.