How to make table consistent in all browsers - html

Question

I am starting to learn HTML. In a table I created I use rowspan, but when I insert an image in a column that is expanded the image seems to not expand in the whole cell. So the rows of the table start to have different heights.
This happens in EDGE and IE but not in OPERA,Firefox etc as is shown in the images below. Column heights are not consistent there too.
Ideally, I would like to have the following heights (assuming fixed row height) for the cells identified by their content:
Headers 1 and 2: 1 column
Headers 3 and 4: 2 columns
Left image height: 4 columns
Right image height: 6 columns
body{
background-color:#FFFF99
}
img {
height: 70px;
display:block;
}
h1{
font-style: italic;
color:#3300CC;
}
table, th, td {
border: 1px solid black;
border-spacing:3px;
}
table {
width: 75%;
}
th {
padding:4px;
text-align:right;
}
td{
padding:4px;
}
.Tablestyle1{
background-color: #00CC66;
text-align: center
}
<h1>TITLE </h1>
<table>
<tr class="Tablestyle1" > <!--First Row-->
<td>A</td>
<td colspan="4">B</td>
</tr>
<tr>
<td class="Tablestyle1"rowspan="2">C</td>
<th>Header1</th>
<td> D</td>
<td rowspan="6"> <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt1" >
<td rowspan="6">
<ol type="I">
<li>List1</li>
<li>List2</li>
<li>List3</li>
</ol>
</tr>
<tr>
<th>Header2</th>
<td>F</td>
</tr>
<tr>
<td rowspan="4">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt2" >
</td>
<th rowspan="2">Header3</th>
<td rowspan="2">H</td>
</tr>
<tr></tr>
<tr>
<th rowspan="2">Header4</th>
<td rowspan="2">L</td>
</tr>
<tr></tr>
<tr>
<td colspan="5">
Link1
</td>
</tr>
</table>

Answer 1

Here is a stripped down example with inline css to explain how to style each element. The colspans and rowspans is also simplified.
This is a fixed height solution. If you want the height to be adjusted to the content, you might need some jQuery magic. Flexbox and tables won't work cross browser I think.
<table style="border-collapse: collapse; width: 75%; height: 216px;" border="1">
<tbody>
<tr style="height: 36px;">
<td style="width: 30%; height: 36px;">A</td>
<td style="width: 70%; height: 36px;" colspan="4">B</td>
</tr>
<tr style="height: 36px;">
<td style="width: 30%; height: 72px;" rowspan="2">C</td>
<td style="width: 15%; height: 36px;">1</td>
<td style="width: 10%; height: 36px;">D</td>
<td style="width: 20%; height: 144px;" rowspan="4">Image</td>
<td style="width: 25%; height: 144px;" rowspan="4">List</td>
</tr>
<tr style="height: 36px;">
<td style="width: 15%; height: 36px;">2</td>
<td style="width: 10%; height: 36px;">F</td>
</tr>
<tr style="height: 36px;">
<td style="width: 30%; height: 72px;" rowspan="2">Image</td>
<td style="width: 15%; height: 36px;">3</td>
<td style="width: 10%; height: 36px;">H</td>
</tr>
<tr style="height: 36px;">
<td style="width: 15%; height: 36px;">4</td>
<td style="width: 10%; height: 36px;">L</td>
</tr>
<tr style="height: 36px;">
<td style="width: 100%; height: 36px;" colspan="5">Link</td>
</tr>
</tbody>
</table>
If the content is too big the table could still be distorted – unless you use overflow:hidden https://stackoverflow.com/a/509825/762640

Answer 2

For the height, you can set height to all td's
Another option (also for the width) you can set class for every cell you want, and define the css rules for it.
You can see the example here.
https://jsfiddle.net/5upeywrd/2/
I did the rule for the header cell "A".