Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 337
w s Avatar asked Oct 24 '11 15:10

w s


People also ask

Which is better div or table by Performance?

TABLEs are the correct technology for tabular data. DIVs are the correct technology for page layout and defining objects on the page (along with other block-level objects, i.e. heading, paragraphs, ul tags etc.).

Should I use table or div?

In general, try to use TABLE for true tables of data, use DIV and SPAN for logical block or inline containers of content. Show activity on this post. Tables should only be used to display data in a tabular way. For layout and design it is best practise to use divs and stylesheets.

Why divs are better than TABLEs?

Using divs correctly #Because a div element marks up only one block at a time, the code base is much smaller than that of a table-based structure. Less code is code that is more readable, easier to maintain, faster to develop, less buggy, smaller in size, you get the point.

Can we use div in table?

No, you cannot insert a div directly inside of a table.


1 Answers

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.

like image 156
Whetstone Avatar answered Oct 20 '22 21:10

Whetstone