title: HTML + CSS Table with different size columns?
body: <p>This is what I'm looking to get:</p>
  
  <p><img src="https://i.stack.imgur.com/sV8NJ.png" alt="layout I am trying to achieve">
  I'd like a category bar on the side, and all the main content in the right box. Right now, I'm attempting to do this with tables, and it's proving to be difficult.
  Are there any useful CSS functions that I should be using?</p>
  
  <p>Edit: Sorry, here's the current code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;img src="xxx"&gt;
  
  &lt;table width="100%" border=1&gt;
      &lt;col width="30%"&gt;
      &lt;col width="70%"&gt;
  
      &lt;tr&gt;
          &lt;th id="row1"&gt;
              Categories
          &lt;/th&gt;
          &lt;th id="row1"&gt;
              Main Content
          &lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;/div&gt;
  
  
      &lt;tr&gt;
          &lt;th&gt;
              Category Header
          &lt;/th&gt;
          &lt;td id="main-content"&gt;
              45645
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;
              &lt;li&gt;
              Category Entry
              &lt;/li&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>And my current stylesheet:</p>
  
  <pre><code>li {
  list-style-type: none;
  }
  
  #row1 {
  color: ;
  }
  
  #main-content {
  padding: 9999999;
  margin-bottom: 9999999;
  }
  </code></pre>