最佳实践：Table、Div、List 或某种组合...？
我有一个少于 100 行的简单数据表。我目前一直在一系列嵌套的 DIV 中显示数据。每行都有一个容器 div，其中嵌套的 div 代表其中的数据列。 （这是我最早编码时的反应，当时还没有像 div 这样的东西）。
第一列数据的格式为图像链接，而其他两列为文本。
重新使用桌子有意义吗？
另外，作为一个实验，我考虑过使用嵌套 UL。包含所有行的 UL，以及每行的单独水平 UL。
作为进一步的说明/问题，我有另一个数据块，可能会导致数千行。在这种情况下，大量的数据会导致“最佳实践”的不同答案吗？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
实际上，您可以使用任何您想要的容器。最佳实践是将元素用于其应有的用途。如果您要显示表格数据，请务必使用表格！有一些很棒的插件可以让用户获得更好的体验，并且非常容易阅读和复制/粘贴。
我经常问自己的问题是，这些数据是否最好在 Word 或 Excel 文件中显示。如果是 Excel，那么它就是一个表格。如果是Word，那就是div。
如果您使用数千行，您可能希望让用户控制排序、过滤和提取更多信息以提高可用性。我会使用一个带有一些 jQuery 插件（如 tablesorter、hovertable 和 tableFilter）的表格来帮助简化此操作。
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.
在这种情况下，一张桌子就可以了。表格用于显示表格数据，例如数据库中的行。不过，您应该避免使用表格进行页面布局......
至于有数千行，您可能需要研究分页。我认为没有更好的“最佳实践”
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"
列表适用于一维数据。
表用于多维数据。
div 是将事物分开或将某些事物包含在其他事物中。
如果您的数据的每个项目都与其他一些项目有所有者关系，您应该使用表。
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.
列表用于列表，表格用于表格数据，div 用于布局。因此，如果您想走最佳实践路线；我认为你应该在这里使用一张桌子。
话虽如此；与表格相比，使用 div 并没有那么糟糕。如果您已经使用 div 而不是表格，我不会担心重写。需要注意的一个问题是您正在清除浮动列 div。例如：
您应该避免相反的情况（使用应该使用 div 的表格）。
另外，即使您可能能够使用列表元素获得某种表结构，但这也不是您想要的路线。我以前从未这样做过......说实话，在我看过的数百个示例中，我认为我从未见过有人将它们用于这样的目的。我想这里最好的理由是你为什么要这样做？因为我以前从未见过它，所以我没有任何方便的例子来说明为什么你不应该这样做。但对我来说，这类似于告诉某人当手边有扳手时不要使用管子来松开螺栓。我的意思是当然......也许管道可以完成工作，但扳手就在那里......
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:
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...
如果我需要以类似表格的方式显示数据，我主要使用
元素。当显示 1000 行或更多时，您应该考虑用户友好性。 jqGrid 插件是一个很好的解决方案，具有分页、排序、搜索等功能。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.