桌跨如何工作？

Question

我会想做什么：

我是怎么写的：

<table> 
    <TR> 
     <TD ROWSPAN="4">left</TD> 
     <TD ROWSPAN="12">middle</TD> 
     <TD ROWSPAN="3">right</TD> 
    </TR> 
    <TR> 
     <TD ROWSPAN="4">left2</TD> 
     <TD ROWSPAN="3">right2</TD> 
    </TR> 
    <TR> 
     <TD ROWSPAN="4">left3</TD> 
     <TD ROWSPAN="3">right3</TD> 
    </TR> 
    <TR> 
     <TD ROWSPAN="3">right4</TD> 
    </TR> 
</table> 

事实证明这一点：

我想表具有相同的高度，我可以以这种方式工作，但它不是一样的高度：

<table> 
    <TR> 
     <TD>left</TD> 
     <TD ROWSPAN="12">middle</TD> 
     <TD>right</TD> 
    </TR> 
    <TR> 
     <TD>left2</TD> 
     <TD>right2</TD> 
    </TR> 
    <TR> 
     <TD>left3</TD> 
     <TD>right3</TD> 
    </TR> 
    <TR> 
     <TD>right4</TD> 
    </TR> 
</table> 

，结果是这样的：

Answer 1

明白了！诀窍是总共有12个<tr> s，尽管其中一些是空的。

作为好奇心的一点，我通过在Excel中创建表格，保存为html，并删除所有excel放入其中的内联样式来解决此问题。

td { 
 
    border: 1px solid black; 
 
}

<table> 
 
<tr> 
 
    <td rowspan=4>left</td> 
 
    <td rowspan=12>middle</td> 
 
    <td rowspan=3>right</td> 
 
</tr> 
 
<tr> 
 
</tr> 
 
<tr> 
 
</tr> 
 
<tr> 
 
    <td rowspan=3>right2</td> 
 
</tr> 
 
<tr> 
 
    <td rowspan=4>left2</td> 
 
</tr> 
 
<tr> 
 
</tr> 
 
<tr> 
 
    <td rowspan=3>right3</td> 
 
</tr> 
 
<tr> 
 
</tr> 
 
<tr> 
 
    <td rowspan=4>left3</td> 
 
</tr> 
 
<tr> 
 
    <td rowspan=3>right4</td> 
 
</tr> 
 
<tr> 
 
</tr> 
 
<tr> 
 
</tr> 
 
</table>