html - 使用 HTML 嵌套表格

Question

我正在尝试将两个表格嵌套在另一个表格中(这样它们会并排显示，一旦我有足够的信息，我可以添加第三个表格。)出现“山姆的绘画价格表”没有问题，CSS 完好无损并适当对齐。我试图嵌套在较大表的第二个单元格中的第二个表没有。相反，它显示在第一个嵌套表的下方。我不知道为什么。我在这里看了几个线程，但每个人都在说“不要嵌套表格”……所以我试着不嵌套它们。但它们仍然不会并排显示。这是我拥有的:

<table class = "pricingTable" >
<tr>
<th colspan = "2">Sam's Painting<br>Price Schedule</th></tr>
<tr><td  class = "pricingTable">11"x14" </td><td  class = "pricingTable">$40</td></tr>
<tr><td  class = "pricingTable">14"x17" </td><td  class = "pricingTable">$80</td></tr>
<tr><td  class = "pricingTable">16"x20" </td><td  class = "pricingTable">$100</td></tr>
<tr><td  class = "pricingTable">20"x20" </td><td  class = "pricingTable">$120</td></tr>
<tr><td  class = "pricingTable">18"x24" </td><td  class = "pricingTable">$125</td></tr>
<tr><td  class = "pricingTable">20"x32" </td><td  class = "pricingTable">$150</td></tr>
<tr><td  class = "pricingTable">36"x24" </td><td  class = "pricingTable">$200</td></tr>
<tr><th colspan = "2">Bracelets</th></tr><tr>
<td  class = "pricingTable">Simple Bracelet</td><td  class = "pricingTable">$15</td>
</tr></table>

<table class = "pricingTable" ><tr>
<th colspan = "2">Chana's Sewing<br>Price Starter Guide</th>
<tr><td  class = "pricingTable">Cravats </td><td  class = "pricingTable">$20</td></tr>
<tr><td  class = "pricingTable">Bow-ties </td><td  class = "pricingTable">$20</td></tr>
<tr><td  class = "pricingTable">Cuffs </td><td  class = "pricingTable">$30</td></tr>
<tr><td  class = "pricingTable">Skirts </td><td  class = "pricingTable">$35</td></tr>
<tr><td  class = "pricingTable">Bustles </td><td  class = "pricingTable">$40</td></tr>
<tr><td  class = "pricingTable">Coats</td><td  class = "pricingTable">$40</td></tr>
<tr><td  class = "pricingTable">36"x24" </td><td  class = "pricingTable">$200</td></tr>
<tr><td  class = "pricingTable">Tie Tacks</td><td  class = "pricingTable">$10
</td></tr></table>

如果相关，这里是 CSS 的“pricingTable”部分。

.pricingTable
{
    border:2px solid slategrey;
    background-color:#FFFFFF;
    border-collapse:collapse;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;
}

Answer 1

<table class="outer"><tr>
<td>put table 1 here</td>
<td>put table 2 here</td>
</tr></table>