CSS table border with multiple tables
<p>I have two tables in one page. I want to border around one of them and no border on the other one. So I am using the id="". But it is still putting borders around both tables and I am not sure why. If I change table1 for no border, it will take away the border on both tables. Please give me any helpful link or advice. Thanks. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table 
{
    border-collapse: collapse;
}

#table1 td, tr
{
    text-align:center;
    border: 1px solid black;
}

#table1 th
{
    background: orange;
}

#table2
{
    margin:auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id = "table1"&gt;
    &lt;th&gt; Header &lt;/th&gt;
    &lt;tr&gt;
        &lt;td&gt;row 1&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;

&lt;table id = "table2"&gt;
    &lt;th&gt; Header &lt;/th&gt;
    &lt;tr&gt;
        &lt;td&gt;row 1&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>