桌跨如何工作？

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>