Html 如何使中间TD高于侧面TD？

我有一张有3个单元格的桌子，我想让中间的一个比边上的高，比如中间的高度是300px，边上的是200px。我给中间的一个单独的等级，而不是边的等级，我把中间的等级设置为300px，边的等级设置为200px。但是他们还是一样高，为什么

#中{
宽度：600px；
高度：400px；
边框：实心1px黑色；
}
.这边{
宽度：300px；
高度：300px；
边框：实心1px黑色；
}

---

像其他人在评论中提到的那样，最好使用div或其他标记 但若你们仍然想使用table，你们可以这样做

<table>

          <tr>
               <td>&nbsp;</td>
               <td id = "mid" rowspan="2"></td>
               <td></td>
           </tr>
          <tr>
               <td class = "side"></td>
               <td></td>
               <td class ="side"></td>
           </tr>
  </table>

这是一把小提琴

---

您应该仅将表格用于表格数据，而不用于布局。对于一个表，您尝试执行的操作是无法实现的，因为一行中的所有表单元格都将与该行最高的单元格具有相同的高度

相反，您应该使用div，在下面的示例中，我使用flexbox对齐了一行中的div：

.container{
显示器：flex；
宽度：1200px；
保证金：自动；
}
.中{
宽度：600px；
高度：400px；
边框：实心1px黑色；
}
.这边{
宽度：300px；
高度：300px；
边框：实心1px黑色；
}

单个表格行中的所有单元格的高度始终相同。这就是HTML表的工作方式。如果要创建外观或行为与表格不同的内容，最好选择不同的HTML元素。HTML表格用于表格数据，不建议使用它们来组织与表格布局不直接对应的可视化布局（其中一行具有恒定高度）。使用

div

或其他方法我做了这件事，并尝试内联它，但它就是不起作用什么不起作用？如果你能告诉我你的尝试，我可以告诉你什么是错误的我不能在一行中得到DIV元素这就是容器上的display flex的目的-它将子DIV排成一行