title: Simple CSS: Formatting multiple tables
body: <p>I have a rather simple CSS question.</p>
  
  <p>I want to create a table that follows certain formatting. I want to format several tables differently on the same page.</p>
  
  <p>I have this:</p>
  
  <p>CSS:</p>
  
  <pre><code>table.firstTable
  {
      border: 1px solid black;
  }
  td.firstTable
  {
      border: 1px solid black;
  }
  th.firstTable
  {
      border: 1px solid black;
      background: #00003f;
      font-color: #cfffff;
  }
  table.secondTable
  {
      border: 1px solid red;
  }
  td.secondTable
  {
      border: 1px solid red;
      font-family: sans-serif;
  }
  th.secondTable
  {
      border: 1px solid red;
      background: #cfffff;
      font-color: #00003f;
  }
  </code></pre>
  
  <p>The only way I can then create tables this way is something like:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="firstTable"&gt;
    &lt;tr&gt;
      &lt;th class="firstTable"&gt;Item&lt;/th&gt;
      &lt;th class="firstTable"&gt;Quantity&lt;/th&gt;
      &lt;th class="firstTable"&gt;Price&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="firstTable"&gt;0-001&lt;/td&gt;
      &lt;td class="firstTable"&gt;Computer&lt;/td&gt;
      &lt;td class="firstTable"&gt;$299.99&lt;/td&gt;
    &lt;/tr&gt;
    ...
  &lt;/table&gt;
  
  &lt;table class="secondTable"&gt;
    &lt;tr&gt;
      &lt;th class="secondTable"&gt;Customer ID&lt;/th&gt;
      &lt;th class="secondTable"&gt;Total Sales&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="secondTable"&gt;10001&lt;/td&gt;
      &lt;td class="secondTable"&gt;$39.94&lt;/td&gt;
    &lt;/tr&gt;
    ...
  &lt;/table&gt;
  </code></pre>
  
  <p>I <em>know</em> there's a better way to accomplish this than constantly repeating the "firstTable" and "secondTable" classes. </p>
  
  <p>I tried doing things with  like this:</p>
  
  <p>CSS:</p>
  
  <pre><code>#firstTable table
  {
      border: 1px solid black;
  }
  #firstTable th
  ...
  </code></pre>
  
  <p>and then</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="firstTable"&gt;
  &lt;table&gt;
  ...
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but it didn't work.</p>
  
  <p>What am I missing?</p>