title: creating the same thing with divs as tables
body: <p>I started looking into CSS more deeply and decided I would like to convert my site's html that mainly consists of tables to divs.</p>
  
  <p>I'm trying to accomplish the same thing with divs as with tables on this test page. But I'm having a few problems:</p>
  
  <ol>
  <li>Couldn't make columns</li>
  <li>Vertical text alignment</li>
  </ol>
  
  <p>How far I've gotten:
   <img src="https://i.stack.imgur.com/ydTBb.png" alt="table vs div"></p>
  
  <p>Code:</p>
  
  <pre><code> &lt;style type="text/css"&gt;
  
  
  body {
  background-color:#000;
  }
  
  
   /* TABLE CSS */
   td {
      font-family: Tahoma; 
      font-size: 12px;
  
  }
  .line {
     border-collapse:separate;
     border:1px solid #222222;
     border-spacing:1px 1px;
     margin-left:auto;
     margin-right:auto;
     background-color: #000000;
     padding: 1px;
     width:400px;
  
  }
  .topic {
      background-color:#3C0;
      font-weight: bold;
      height: 23px;
      color:#FFF;
      text-align:center;
  }
  .row {
      background-color: #111111;
  
      border-bottom: 1px solid black;
      color: #ffffff;
      height:12px;
      line-height:21px;
      padding:0px; 
  }
  .row:Hover {
      background-color: #252525;
  }
  
  /* DIV CSS */
  div.line {
     border-collapse:separate;
     border:1px solid #222222;
     border-spacing:1px 1px;
     align:center;
     background-color: #000000;
     padding: 1px;
     width:400px;
  
  }
  div.topic {
      background-color:#3C0;
      font-family: Tahoma; 
      font-size: 12px;
      height: 23px;
      font-color:#FFF;
      text-align:center;
  
   }
  div.row {
      background-color: #111111;
      border-bottom: 1px solid black;
      color: #ffffff;
      padding:6px; 
      font-family: Tahoma;
      font-size:12px;
  
  }
  
  div.row:Hover {
      background-color: #252525;
  }
  
  &lt;/style&gt;
  &lt;body&gt;
  
  
  &lt;table class="line"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="topic" colspan="3"&gt;Table&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="row"&gt;
        &lt;td width="20%" align="left"&gt;Test&lt;/td&gt;
        &lt;td width="20%" align="center"&gt;1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="row"&gt;
        &lt;td align="left"&gt;Test&lt;/td&gt;
        &lt;td align="center"&gt;2&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
   &lt;p&gt;
   &lt;div class="line"&gt;
   &lt;div class="topic"&gt;Div&lt;/div&gt;
   &lt;div class="row"&gt;Test&lt;/div&gt;&lt;div class="row"&gt;1&lt;/div&gt;
   &lt;div class="row"&gt;Test&lt;/div&gt;&lt;div class="row"&gt;2&lt;/div&gt;
   &lt;/div&gt;
  &lt;/p&gt;
  </code></pre>