CSS - efekt podobny do rzędu wierszy

Question

Po prostu chcę uzyskać efekt, w którym lewa kolumna ma dwa połączone wiersze, a ten po prawej ma brak. Jak mogę osiągnąć ten układ?

tabela html będzie wyglądać -

<table border="1" > 
    <tr> 
    <td rowspan="2">Div 1</td> 
    <td> Div 2 </td> 
    </tr> 
    <tr> 
    <td>Div3</td> 
    </tr> 
</table>​​​​​​ 

Edit: Chciałbym acheive to przy użyciu Div. Chciałbym umieścić Kontrolę użytkownika w każdym elemencie div. Ważne jest, aby Div3 zaczynało się poniżej div2, ale nie poniżej Div1.

[Niestety, jest to pierwszy post, więc nie mogę dodać zdjęcie]

Dzięki.

Answer 1

CSS

body { 
     margin: 0; 
     padding: 50px; 
     background-color: #FFFFFF; 
     color: #000000; 
     font-family: Arial, Helvetica, sans-serif; 
    } 
    .tablewrapper { 
     position: relative; 
    } 
    .table { 
     display: table; 
    } 
    .row { 
     display: table-row; 
    } 
    .cell { 
     display: table-cell; 
     border: 1px solid red; 
     padding: 1em; 
    } 
    .cell.empty 
    { 
     border: none; 
     width: 100px; 
    } 
    .cell.rowspanned { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     width: 100px; 
    } 

<div class="tablewrapper"> 
     <div class="table"> 
     <div class="row"> 
      <div class="cell"> 
      Top left 
      </div> 
      <div class="rowspanned cell"> 
      Center 
      </div> 
      <div class="cell"> 
      Top right 
      </div> 
     </div> 
     <div class="row"> 
      <div class="cell"> 
      Bottom left 
      </div> 
      <div class="empty cell"></div> 
      <div class="cell"> 
      Bottom right 
      </div> 
     </div> 
     </div> 
    </div> 

Demo: http://www.sitepoint.com/rowspans-colspans-in-css-tables/