How to make table consistent in all browsers

Issue

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">
            <a href="*"> Link1</a>
        </td>
    </tr>   
    </table>

Solution

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

Answered By - eye-wonder