Should I use <table> or <ul>?

Question

I have to display dynamic data using javascript, which should be displayed as n rows, m columns. I have heard about the bad effects of using tables, but I cannot justify myself why I should / should not use tables. Can you talk about best practice in choosing an alternative for this requirement. I generally <ul> is an alternative, how do I manage to make it look like a table?

If I use tables, I cannot animate the rows of the table. Observing this consideration, please offer an alternative.

Answer 1

You should not use tables for layout. It is wise to use tables for tabular data. If you have "n rows" and "m columns", that sounds a lot like tabular data, and it would be wise to use <table> .

Regarding the "revitalization" of the rows of the table, if this means the dynamic addition and removal of rows from the table using javascript, this is supported. See the DOM Reference for table methods . It supports operations such as insertRow() and deleteRow() .

Answer 2

Tables are used sequentially for tabular data, which is bad when you use them for layout purposes. In your case, you can use tables, since you want to show some data, and I wonder how you can not animate table rows? Thanks

See W3C : Tables in HTML Docs

Answer 3

The first sentence of your question describes a table , so you should display it as a table.

Is line waiting really necessary?

Answer 4

This is a very common dilemma in the head of web developers. In fact, using a spreadsheet sometimes makes it easier to create web pages, but makes it very difficult when you try to edit or edit them. Tables should only be used to create tabular data, such as data grids, or to present lists in a table layout. Using the right layout for the right layout makes a lot of sense for the web page and makes it more readable. You can check the following links to learn more about the meaning of semantic HTML.

http://www.communitymx.com/content/article.cfm?cid=0BEA6 http://www.thefutureoftheweb.com/blog/writing-semantic-html

Answer 5

Tables are the right choice for the situation.

If you are using jQuery, you can animate li or tr or something else.

Here is an example of deleting a row using jQuery:

 close_timeout = setTimeout(function() { $("tr#row_"+id).css("background","red"); $("tr#row_"+id).animate({ opacity: 'hide' }, "slow"); }, 600); $("tr#row_"+id).remove(); 

This changes the background to red, hides tr , and then removes it from the DOM.

Hope this helps.

Answer 6

This is data. Use tables.

Try this jQuery plugin to format your table:

http://tablesorter.com/docs/