Dynamic Data Grid

Question

My project is re engineering a an HTML data grid constructing using SQL query generated XML and XSL into an HTML table.

The content of the table is not known at deployment as the SQL used to build the XML data is generated by the application at runtime.

Given the distaste for tables in the CSS world I am hoping someone has a better suggestions for what the HTML should look like and what resources might be helpful dealing with the dynamic nature of domain.

Answer 1

The distaste most web developers have is not for tables themselves, but their misuse - people often utilize tables for content/element positioning on a web page, which is a "no no." But no one said there's anything wrong with using tables for display of tabular data - that's what HTML tables were intended for.

So the answer depends on how the data coming from your DB is structured.

.

Use tables for something like this:

Orders:

--------------------------------------------------------
| Order ID  | Product Name  |  Order Date |  Ordered By |
--------------------------------------------------------
| 1         | blah blah     |  1/1/2009   |  Jane Doe   |
| 2         | blah blah     |  1/1/2009   |  Jane Doe   |
| 3         | blah blah     |  1/1/2009   |  Jane Doe   |

.

Don't use a table for something like this:

"Hello, Jane Doe.  

Your order (#2), which was received on 1/1/2009, is being processed.  Sorry for the delay.

                                                    - Your friends at ABC Store"

Answer 2

Building on fallen888's answer, you can really do a lot with tables to structure data in HTML. A few good things I can recommend are:

• Use <thead>, <tbody>, and <th> elements. Don't just make a row of "bold" <td>s.
• Use the <caption> element.
• Use the scope attribute to associate headers with rows or columns.

Veerle's blog has two excellent tutorials on the subject:

• A CSS styled table
• A CSS styled table version 2