What HTML tag is most appropriate for display in a Grid or Table? (with specific needs)

Question

I'm trying to build a CSS-based table that will be populated with information coming from a database.

What is the most appropriate tag to use for this structured data? I originally considered ul since each row is an unordered list of data... but then I uncovered some difficulties making it into a grid using CSS.

I'm now looking at DIV (inline?) and Span. There may be others. What tag would be considered the industry standard way of displaying a CSS based grid?

Although I'm interested in learning what's most appropriate one from a DOM-Theory perspective, ultimately I want clean code that is consistent among browsers... This may weed out the ul tag entirely.

What do the experts think?

Update

So it seems that everyone is recommending that I use a table for (duh) tabular data. The only reason I don't feel silly for asking this question is because my ASP.net grid vendor is having issues with a dynamically resizing grid... and allowing for the columns to be resized on the client.

The vendor claims that the reason columns are having issues with a resize is because of tables. They will be moving to a DIV based layout to fix the issue. I'll post a reference link shortly...

Search for the word "Based" and you will see the posting from a MVP who mentions the internal changes: http://stagev5.componentart.com/community/forums/t/60782.aspx

Update 2:

Perhaps a large non-table based grid will also render faster.

You might say I need a lot of scalibility (for a large rowset) and the ability to resize the panes. Very similar to how Outlook currently looks/operates:

Summary of needs: I'm looking for a Table approach that allows for:

• Fast Rendering
• Large Datasets
• Rich formatting
• The ability to resize outer container/div
• When changing the width/height of outer container, the columns will keep the width property or grow, as defined in HTML

Answer 1

I would use a div tag, which you are then able to add additional styling to with far greater ease than an unordered list.

Answer 2

If it's a grid of data, it should be a <table>. It's fair enough to avoid using tables for layout, but if you have tabular data then that's exactly what tables are for.

Answer 3

If you want a tabular or grid information display, then use the table element. It's there for a reason.

Answer 4

I'm trying to build a CSS-based table ... What is the most appropriate tag

sometimes <table> is ok :), you don't have to be a 'cool kid' and do everything with <div>

Answer 5

If you intend to display tabular data (i.e. it comes from a table, such as in a database), use the <table> element. A <div> element can be useful if you plan on doing a lot of heavy formatting on each distinct value in each row from the database table, but if the way you're presenting data is more less in line with data reporting, a <table> will be your best bet.

Answer 6

If your grid represents a list of items, then <ul> is appropriate. You can get around your CSS woes by unstyling the ul/li and then using the child elements to dictate style:

ul, ul li {
    padding: 0;
    margin: 0;
    display: inline;
    list-style: none;
}

ul a {
    float: left;
    background: red;

    height: 100px;
    width: 100px;
    margin: 5px;
}

The above display is controlled by the nested <a>, as you can see here.

Answer 7

This might also interest you: http://www.quirksmode.org/css/display.html

Scroll down through it to the display: table section. Came across this the other day, this question reminded me of it.

If you absolutely HAVE to use CSS, give that a try. But, as other have said, use <table></table> if it's tabular data. If it's a straight-up list, then you can do it with ul, but it becomes more effort than it's worth.

EDIT: It should be noted that that example is using divs for the cells' CSS to be applied to.