Best Practice: Table, Div, List or some combinatio

问题:

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?

回答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.

回答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"

回答3:

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...

回答4:

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.