Adding a "sidebar" within tabular data?

Question

It's probably pretty easy to do, but I just can't think of anything. Lets say I have a row of data that looks like this:

data  |  data  |  data  |  data  |  data  |
data  |  data  |  data  |  data  |  data  |
data  |  data  |  data  |  data  |  data  |
data  |  data  |  data  |  data  |  data  |

and on the side, I need this:

a    data  |  data  |  data  |  data  |  data  |
b    data  |  data  |  data  |  data  |  data  |
c    data  |  data  |  data  |  data  |  data  |
d    data  |  data  |  data  |  data  |  data  |

Whereas the 'abcd' string is one div/column and fills the height that the table has automatically been given.

So basically a column within rows. Thoughts?

Requirements is that it's a fluid table. It's just a table with rows, nothing more. It's built based on the display: table/table-row/table-header/table-cell methods.

A simplified markup:

.data { 
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse
}
    .data header {
        display: table-header-group;
        height: auto;
        border-bottom: 1px solid #2B597B
    }
    .data section {
        display: table-row-group
    }
    .data article { 
        display: table-row;
        line-height: 21px;
        padding: 0 3px
    }
    .data span {
        display: table-cell;
        overflow: hidden
    }

With:

<div class="data">
<header>
    <span>one</span>
    <span>two</span>
</header>
<section>
    <article>
        <span>one</span>
        <span>two</span>
    </article>
</section>
</div>

It has nothing to do w/ incremental data. Just stuff, it could be an empty space.

Answer 1

Just make your "sidebar" a table cell with a rowspan equal to the total number of rows.

Aside: You'll find plenty of folks who while shed many tears over using a table this way. My advice: be pragmatic. Spend your time solving real problems rather than fussing with semantic HTML for the sake of purity.

An example:

<table>
  <tr>
    <td rowspan="2">the sidebar</td>
    <th>one</th>
    <th>two</th>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
</table>