title: Table with cell width and height in percentage
body: <p>I need this for a simple one-time project and would like to avoid an extended studying of all these newer methods ... </p>
  
  <ul>
  <li><p>Am I using CSS correctly in the following code?</p></li>
  <li><p>My attempt to have different cell widths in the second row is not working. How this must be done to work?</p></li>
  </ul>
  
  
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta content="text/html; charset=UTF-8" http-equiv="content-type"&gt;
      &lt;style&gt;
          table {
              height: 100%;
              width: 100%;
          }
  
          tr.row1 {
              height: 40%;
          }
  
          tr.row2 {
              height: 5%;
          }
  
          tr.row3 {
              height: 55%;
          }
  
          td.colS {
              width: 40%;
          }
  
          td.colW {
              width: 60%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table&gt;
          &lt;tbody&gt;
              &lt;tr class="row1"&gt;
                  &lt;td class="colS" style="background-color:red"&gt;1&lt;/td&gt;
                  &lt;td class="colW" style="background-color:green"&gt;2&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="row2"&gt;
                  &lt;td class="colW" style="background-color:green"&gt;3&lt;/td&gt;
                  &lt;td class="colS" style="background-color:red"&gt;4&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="row3"&gt;
                  &lt;td class="colS" style="background-color:red"&gt;5&lt;/td&gt;
                  &lt;td class="colW" style="background-color:green"&gt;6&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>