Should I use <table> or <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

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 2

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 3

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

Is animating the rows really necessary?

Answer 4

Hi Ajay,

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 5

Tables is the right choice for the situation.

if y use jQuery y can animate li or tr or anything else.

Example on delete 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 change the background to red (or other color), hides the tr, and the remove from DOM

I hope this help

Answer 6

It's data. Use tables.

Try this jQuery plugin for formatting your table:

http://tablesorter.com/docs/