Banded grid view in XHTML Strict + CSS

Question

I'm trying to create a simple banded grid view in XHTML Strict with CSS. For an example see this picture of a devExpress GridView. The main issue is how to create a table where each entry consists of multiple rows. Of course, something like

<table>
<tr><td>
   <table>
   <tr>
     <td width=100>Item 1, cell 1</td>
     <td width=200>Item 1, cell 2</td>
   </tr><tr>
     <td width=300>Item 1, cell 3</td>
   </tr><tr>
     <td width=150>Item 1, cell 4</td>
     <td width=150>Item 1, cell 5</td>
</td></tr>
<tr><td>
   <table>
   <tr>
     <td width=100>Item 2, cell 1</td>
     <td width=200>Item 2, cell 2</td>
   </tr><tr>
     <td width=300>Item 2, cell 3</td>
   </tr><tr>
     <td width=150>Item 2, cell 4</td>
     <td width=150>Item 2, cell 5</td>
</td></tr>
</table>

However, this 'smells'. Same goes for using a lot of colspans. Are there any other options?

Answer 1

You could probably write your own way of outputting the table (either as a method in the codebehind, or as a custom controller), with a DataTable-object or something like that as input. Don't think the standard gridview-controller is able to do what you want it to.

Answer 2

You could also nest tables:

<table>
<tr><td><!----- row 1 -->
    little icon
</td><td>
    <table>
        <tr><td>Band 1</td><td>some data</td></tr>
        <tr><td>Band 2</td><td>some other data</td></tr>
    </table>
</td></tr>
<tr><td><!----- row 2 -->
...
</td></tr>
</table>