How the table span works?
<p>What I would like to do:
<a href="https://i.stack.imgur.com/POcp9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/POcp9.png" alt="enter image description here"></a></p>

<p>What did I wrote:</p>

<pre><code>&lt;table&gt;
    &lt;TR&gt;
        &lt;TD ROWSPAN="4"&gt;left&lt;/TD&gt;
        &lt;TD ROWSPAN="12"&gt;middle&lt;/TD&gt;
        &lt;TD ROWSPAN="3"&gt;right&lt;/TD&gt;
    &lt;/TR&gt;
   &lt;TR&gt;
        &lt;TD ROWSPAN="4"&gt;left2&lt;/TD&gt;
        &lt;TD ROWSPAN="3"&gt;right2&lt;/TD&gt;
   &lt;/TR&gt; 
    &lt;TR&gt;
        &lt;TD ROWSPAN="4"&gt;left3&lt;/TD&gt;
        &lt;TD ROWSPAN="3"&gt;right3&lt;/TD&gt;
    &lt;/TR&gt;
  &lt;TR&gt;
        &lt;TD ROWSPAN="3"&gt;right4&lt;/TD&gt;
  &lt;/TR&gt;
&lt;/table&gt;
</code></pre>

<p>It turns out with this:
<a href="https://i.stack.imgur.com/iYuP5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iYuP5.png" alt="enter image description here"></a></p>

<p>I would like the table have same height, I can work in this way, but it is not the same height:</p>

<pre><code> &lt;table&gt;
    &lt;TR&gt;
        &lt;TD&gt;left&lt;/TD&gt;
        &lt;TD ROWSPAN="12"&gt;middle&lt;/TD&gt;
        &lt;TD&gt;right&lt;/TD&gt;
    &lt;/TR&gt;
   &lt;TR&gt;
        &lt;TD&gt;left2&lt;/TD&gt;
        &lt;TD&gt;right2&lt;/TD&gt;
   &lt;/TR&gt; 
    &lt;TR&gt;
        &lt;TD&gt;left3&lt;/TD&gt;
        &lt;TD&gt;right3&lt;/TD&gt;
    &lt;/TR&gt;
  &lt;TR&gt;
        &lt;TD&gt;right4&lt;/TD&gt;
  &lt;/TR&gt;
&lt;/table&gt;
</code></pre>

<p>and the result like this:</p>

<p><a href="https://i.stack.imgur.com/Hd02N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hd02N.png" alt="enter image description here"></a></p>