Issues with drawing a table using rowspan and colspan using HTML
<p>I have started to draw a table in HTML. I desired to draw <a href="https://i.stack.imgur.com/N8sSR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N8sSR.png" alt="enter image description here"></a></p>

<p>Observe that 2.2 starts at center of 1.1 and 3.1 starts at center of 2.2. 
The code I wrote for this is</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="3" width="400" height="200"&gt;
 &lt;tr&gt;
  &lt;td rowspan="2"&gt;1.1&lt;/td&gt;
  &lt;td&gt;1.2&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td rowspan="2"&gt;2.2&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td&gt;3.1&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td colspan="2"&gt;4.1&lt;/td&gt;
 &lt;/tr&gt;
&lt;table&gt;</code></pre>
</div>
</div>
</p>

<p>You can see the output. Can any one tell me why the output is not as i desired by suggesting the changes in the code. Thanks in advance. </p>

<p><strong>After going through the comments I found that code is working fine in chrome. Problem is only in Firefox and Edge.</strong></p>