Using nested lists instead of tables for displaying data in HTML

Instead of using HTML tables, I'm thinking of just using nested list structures to display table-like data going forward.

For example:

<div class="table">
   <ul class="row">
      <li class="cell col-id"></li>
      <li class="cell col-name"></li>
      <li class="cell col-age"></li>
   </ul>
</div>

My reasons:

• More comfortable styling block elements than trs and tds.
• ul/li elements seem more flexible in terms of styling options, using JQuery, etc.
• Aren't tables heavy and render all at once?

On the other hand, I can't see any advantages to using HTML Tables.

Am I way off base here? If so, please explain the benefi开发者_如何学JAVAts of using HTML tables, because I can't seem to remember any.

To me this is no different than using tables for the layout of a web page. You are breaking the semantics of your page by using a ul to represent tabular data. The following is not an exhaustive list, but highlights some of the reasons why I would stick with tables:

1. If someone is browsing your page with CSS turned off, lists will not preserve the look of a table and will be difficult to interpret

2. Screen readers will not be able to recognize that these are tables making it an accessibility problem. Also, this isn't as important, but if someone wants to parse your data directly from your site they will have to figure out your list format.

3. You lose out on some of the benefits of thead, tfoot, and tbody. Off the top of my head, one great benefit of thead is that if you print a table that spans multiple pages, the headings in thead will show up on each page above the table rows.

4. I you decide to use a WYSISYG editor, you will not be able to use some of the table creation wizards.

5. If others will have to maintain your site in the future, they will have to learn the specifics of this new system to represent tabular data.

These are just a few arguments for using a table.

If you do decide to go with the list solution, I just wanted to say good luck and would be interested to see how it work out.

One simple thought: A table implies a tabular organization to the information, i.e. the nth value of every row represents the same attribute of the row. Nested lists don't imply a relationship between the items in the subordinate lists.

I don't have any specifics reasons to use one of the other and with powerful tools like jQuery, it may be that you can certainly accomplish what you want with either organization.

However, all other things being equal, for simplicity, I would try choose the representation that most naturally models the data. It minimizes the "surprise factor" for future maintainers (including future you) and you may find better support in tools when your scenario matches the expected use cases (e.g. tabular data is in a table).

I'm not trying to talk you out of it - I'm just giving you something to consider if you hadn't already. But, experimentation is how we learn, exploration adds spice, and its your app. I say try it and see.