How to make middle TD higher than side ones? - html

Question

I have table with 3 cells, and I want to make middle one higher than side ones, so for example middle one's height is 300px and side one's is 200px. I gave middle one seperate class than side ones and I set middle one to 300px and side ones to 200px. But they are still the same height, why?
#mid {
width: 600px;
height: 400px;
border: solid 1px black;
}
.side {
width: 300px;
height: 300px;
border: solid 1px black;
}
<table>
<tr>
<td class="side"></td>
<td id="mid"></td>
<td class="side"></td>
</tr>
</table>

Answer 1

You should only use tables for tabular data and not for layout. What you are trying to do is not achievable with a table as all table cells in a row will be the same height as the tallest cell of that row.
Instead you should use divs, in the following example I have used flexbox to align the divs in a row:
.container {
display: flex;
width: 1200px;
margin: auto;
}
.mid {
width: 600px;
height: 400px;
border: solid 1px black;
}
.side {
width: 300px;
height: 300px;
border: solid 1px black;
}
<div class="container">
<div class="side"></div>
<div class="mid"></div>
<div class="side"></div>
</div>

Answer 2

LIke others have mentioned in comments you are better off using a div or some other tags
but if you still want to use table you can do something like this
<table>
<tr>
<td> </td>
<td id = "mid" rowspan="2"></td>
<td></td>
</tr>
<tr>
<td class = "side"></td>
<td></td>
<td class ="side"></td>
</tr>
</table>
here is a fiddle
https://jsfiddle.net/vdadekvL/28/