我应该用吗？ <table> 要么 <ul> ？

Question

I have to render dynamic data using javascript which should be displayed as n rows, m columns. I have heard of ill-effects of using tables but cannot justify on my own as to why I should/should-not use tables. Can you reason the best practice in choosing the alternative for the requirement. I at all <ul> is the alternative, how do I manage to make it look like a table?

If I use tables, I cannot animate table rows. Keeping this consideration, please suggest the alternative.

Answer 1

You should not use tables for layout . It's perfectly reasonable to use tables for tabular data. If you have "n rows" and "m columns", that sounds an awful lot like tabular data and it would be appropriate to use a <table> .

As far as "animating" table rows, if by that you mean dynamically adding and removing rows from a table using javascript, that is supported. See the DOM Reference for table methods . It supports operations such as insertRow() and deleteRow() .

Answer 2

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

See W3C's : Tables in HTML Documents

Answer 3

This is a very common dilemma in the Web developers head. Actually using table sometimes make it easy to create web pages but makes it really difficult when you try to modify them or edit them. Tables should only be used to create tabular data like data-grids or representing lists in a tabular layout. Using the right markup for the right layout makes a lot of semantic sense for the webpage and makes it much more readable. You can check the following links to learn more about the significance of Semantic HTML.

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

Answer 4

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

Is animating the rows really necessary?

Answer 5

Tables are the right choice for the situation.

If you use jQuery, you can animate an li or a tr or anything else.

Here's an example of deleting a row with 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 the tr , and then removes it from the DOM.

I hope this helps.

Answer 6

It's data. Use tables.

Try this jQuery plugin for formatting your table:

http://tablesorter.com/docs/