Best practice: table, div, list or some combination ...?

Question

I have a simple data type with less than 100 rows. I am currently displaying data in a series of nested DIVs. Each row has a div container, with nested divs representing the columns of data inside it. (This was in response to my earliest coding days when there was nothing like a div).

The first column of data is formatted as a link to the image, and the other two columns are text.

Does it make sense to revert to using a table?

Also, as an experiment, I was thinking about using UL sockets. UL contains all lines and a separate horizontal UL for each line.

As an additional note / question, I have another block of data that can lead to thousands of rows. Will this amount of data lead to a different “best practice” answer in this case?

Answer 1

Actually, you can use any container you want. The best practice is to use elements for what they are intended to be used for. If you show tabular data, be sure to use the table! There are excellent plugins to improve the user experience, and it is very easy to read and copy / paste.

The question that I always ask myself is that this data is best shown in a Word or Excel file. If Excel, then this is a table. If Word, this is a div.

If you use thousands of lines, you probably want to give the user the ability to sort, filter, and retrieve additional information for ease of use. I would use a table with some jQuery plugins like tablesorter, hovertable and tableFilter to make this easier.

Answer 2

In this case, the table is perfect. Tables are intended for displaying tabular data, for example, rows in db. You should avoid using tables for page layout though ....

As for having thousands of lines, you can look at pagination. I don’t think there is a better "best practice"

Answer 3

Lists for lists, tables for tabular data, and divs for layouts. Therefore, if you want to go the route of best practices; I think you should use the table here.

It is said; using divs as opposed to tables is not so bad. I would not worry about rewriting if you are already using divs instead of tables. The only caveat is that you clear your floating column delimiters. eg:

<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 in which divs should be used).

In addition, despite the fact that you can get some kind of table structure using list items, this is NOT the route you want to go. I have never done this before ... to be honest from the hundreds of examples that I looked at, I don't think I've ever seen anyone use them for such a purpose. I think the best reason is why you? Since I have never seen it before, I have no examples that illustrate why you should not do this. But for me it is akin to telling someone not to use the pipe, to loosen the bolt when they have a wrench. I mean, that ... maybe the pipe could do its job, but the key is there ...

Answer 4

If I need to show data in a table I like, I mainly use the <table> element. You should think about user convenience when displaying 1000 lines or more. The jqGrid plugin is a good solution for this and has features such as paging, sorting, searching, etc.