title: psd to html table height adjustment auto
body: <p>It is my first trial to make an HTML code out of a PSD file. The problem is I have a dynamic table whose content is getting taller depending on selected buttons. However, this creates a problem. The other columns creates ugly intervals with white background instead of the background color I used. </p>
  
  <p>I have read something called Faux Column but I am not able to apply that to my HTML code.</p>
  
  <p>I am using photoshop and dreamweaver. What would you recommend me to deal with height changes in one table row to compensate it in other rows?</p>
  
  <p>I am total numb and dummy in this field.</p>
  
  <p>css file:</p>
  
  <pre><code>@charset "UTF-8";
  /* CSS Document */
  
  body{
  
  width: 1426px;
  margin: 0 auto;
  
  }
      #hovermenu ul{
      font: 12px arial;
      color:#a1a1a1;
      padding-left: 10;
      margin-left: 0;
      height: 15  px;
      }
  
  
  #hovermenu ul li{
  list-style: none;
  display: inline;
  }
  
  #hovermenu ul li a{
  padding:0 ;
  text-decoration: none;
  float: left;
  color:#878787;
  
  
  }
  
  #hovermenu ul li a:hover{
  background-color:#FFF;
  color:#b81321;
  border-style:none;
  }
  
  
  
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  
  
  &lt;link href="styles.css" rel="stylesheet" type="text/css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;table id="Table_01" width="1426" height="%100" border="0" cellpadding="0" cellspacing="0"&gt;
      &lt;tr&gt;
          &lt;td colspan="12"&gt;
              &lt;img src="images/red-ruler.jpg" width="1425" height="4" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="4" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="19" height="1379" rowspan="17"&gt;
              &lt;img src="images/spacer2.gif" width="19" height="1379" alt=""&gt;&lt;/td&gt;
          &lt;td colspan="11"&gt;
              &lt;img src="images/clouds.jpg" width="1406" height="71" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="71" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td rowspan="6"&gt;
              &lt;img src="images/clouds-04.jpg" width="197" height="285" alt=""&gt;&lt;/td&gt;
          &lt;td colspan="5" rowspan="3"&gt;
              &lt;img src="images/logo.jpg" width="279" height="111" alt=""&gt;&lt;/td&gt;
          &lt;td colspan="3"&gt;
              &lt;img src="images/reklam.jpg" width="404" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td rowspan="2"&gt;
              &lt;img src="images/arama-sepetim.jpg" width="317" height="67" alt=""&gt;&lt;/td&gt;
          &lt;td rowspan="6"&gt;
              &lt;img src="images/clouds-08.jpg" width="209" height="285" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="1" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="3" rowspan="2"&gt;
              &lt;img src="images/reklam-top.jpg" width="404" height="110" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="66" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;img src="images/arama-bg.jpg" width="317" height="44" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="44" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="9"&gt;
              &lt;img src="images/top-siyah-menu.jpg" width="1000" height="45" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="45" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="1000" height="13" colspan="9"&gt;
              &lt;img src="images/spacer.gif" width="1000" height="13" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="13" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="6"&gt;
              &lt;img src="images/ust-reklam-cerceve-1.jpg" width="330" height="116" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/ust-reklam-cerceve-2.jpg" width="335" height="116" alt=""&gt;&lt;/td&gt;
          &lt;td colspan="2"&gt;
              &lt;img src="images/ust-reklam-cerceve-1-14.jpg" width="335" height="116" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="116" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="197" height="1023" rowspan="10"&gt;
              &lt;img src="images/spacer2.gif" width="197" height="1023" alt=""&gt;&lt;/td&gt;
          &lt;td colspan="3"&gt;
              &lt;img src="images/magazalar-right-menu.jpg" width="221" height="38" alt=""&gt;&lt;/td&gt;
          &lt;td colspan="6" rowspan="3"&gt;
              &lt;img src="images/ana-logo.jpg" width="779" height="256" alt=""&gt;&lt;/td&gt;
          &lt;td width="209" height="1023" rowspan="10"&gt;
              &lt;img src="images/spacer.gif" width="209" height="1023" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="38" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="221" height="180" colspan="3"&gt;
              &lt;div id="hovermenu"&gt;
          &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/test-ozel/398"&gt;test Ozel&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
  
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Apple-App-Store/236"&gt;Apple App Store&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/test-Magaza/Blackberry/400"&gt;Android Market&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Blackberry-App-World/241"&gt;Blackberry App World&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Nokia-Ovi-Store/242"&gt;Nokia Ovi Store&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Windows-Phone/243"&gt;Windows Phone&lt;/a&gt;
          &lt;/li&gt;
  
  
          &lt;li&gt;
          &lt;a href="http://www.test.net/test-ozel/398"&gt;test Ozel&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
  
  
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Apple-App-Store/236"&gt;Apple App Store&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/test-Magaza/Blackberry/400"&gt;Android Market&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Blackberry-App-World/241"&gt;Blackberry App World&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Nokia-Ovi-Store/242"&gt;Nokia Ovi Store&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Windows-Phone/243"&gt;Windows Phone&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Apple-App-Store/236"&gt;Apple App Store&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/test-Magaza/Blackberry/400"&gt;Android Market&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Blackberry-App-World/241"&gt;Blackberry App World&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Nokia-Ovi-Store/242"&gt;Nokia Ovi Store&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
           &lt;ul&gt;
          &lt;li&gt;
          &lt;a href="http://www.test.net/Windows-Phone/243"&gt;Windows Phone&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
  
  
  
  
  
          &lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="180" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="2" height="125" colspan="2" rowspan="3"&gt;
              &lt;img src="images/spacer.gif" width="2" height="125" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/sepetim-right-menu.jpg" width="219" height="38" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="38" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="219" height="87" rowspan="2"&gt;
              &lt;img src="images/spacer.gif" width="219" height="87" alt=""&gt;&lt;/td&gt;
          &lt;td width="25" height="767" rowspan="7"&gt;
              &lt;img src="images/spacer.gif" width="25" height="767" alt=""&gt;&lt;/td&gt;
          &lt;td width="754" height="31" colspan="5"&gt;
              &lt;img src="images/spacer.gif" width="754" height="31" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="31" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="754" height="667" colspan="5" rowspan="5"&gt;
              &lt;img src="images/spacer.gif" width="754" height="667" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="56" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="3"&gt;
              &lt;img src="images/haber-grubu-right-menu.jpg" width="221" height="38" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="38" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="1" height="150" rowspan="2"&gt;
              &lt;img src="images/spacer.gif" width="1" height="150" alt=""&gt;&lt;/td&gt;
          &lt;td width="220" height="73" colspan="2"&gt;
              &lt;img src="images/spacer.gif" width="220" height="73" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="73" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="220" height="77" colspan="2"&gt;
              &lt;img src="images/spacer.gif" width="220" height="77" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="77" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="221" height="423" colspan="3"&gt;
              &lt;img src="images/spacer.gif" width="221" height="423" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="423" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="221" height="69" colspan="3"&gt;
              &lt;img src="images/spacer.gif" width="221" height="69" alt=""&gt;&lt;/td&gt;
          &lt;td width="754" height="69" colspan="5"&gt;
              &lt;img src="images/spacer.gif" width="754" height="69" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="69" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="12"&gt;
              &lt;img src="images/ruler-bottom.jpg" width="1425" height="3" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="3" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="1425" height="520" colspan="12"&gt;
              &lt;img src="images/spacer.gif" width="1425" height="520" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="520" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="19" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="197" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="1" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="219" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="25" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="33" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="51" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="335" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="18" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="317" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/spacer.gif" width="209" height="1" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>