Search code examples
cssgridviewxhtml-1.0-strict

Banded grid view in XHTML Strict + CSS


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?


Solution

  • 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>