如何爲同一行中的單元格創建不同高度的HTML表格？

Question

我試圖創建佈局HTML表像這樣：

我曾經嘗試這樣做，和一些類似的事情，但無論我做什麼，佈局結束就像一個爛攤子。

<table> 
    <tr> 
     <td rowspan="2">A</td> 
     <td rowspan="1">B</td> 
    </tr> 
    <tr> 
     <td rowspan="1">C</td> 
     <td rowspan="2">D</td> 
    </tr> 
</table> 

Answer 1

有沒有在你的插圖實際上三行：

<table> 
    <tr> 
     <td rowspan="2" height="40">A</td> 
     <td rowspan="1" height="20">B</td> 
    </tr> 
    <tr> 
     <td rowspan="2">D</td> 
    </tr> 
    <tr> 
     <td rowspan="1">C</td> 
    </tr> 
</table> 

的height屬性可以調整，當然，但如果沒有他們，第二行會摺疊成儘可能小的尺寸。

http://jsfiddle.net/mblase75/mgKe9/

Answer 2

您需要確保您的單元有足夠的行可以跨越，並且您在權限行中指定單元格。這將有助於它清除掉（jsfiddle）：

<table border="1"> 
    <tr> 
     <td rowspan="2">A</td> 
     <td>B</td> 
     <td>Normal</td> 
    </tr> 
    <tr> 
     <td rowspan="2">D</td>   
     <td>Normal</td> 
    </tr> 
    <tr> 
     <td>C</td> 
     <td>Normal</td> 
    </tr> 
</table> 

Answer 3

您的問題顯示錶，由這樣的：

<table> 
    <tr> 
     <td> </td> // <-------------- Top left 
     <td rowspan="2"> </td> // <-- Top right 
    </tr> 
    <tr> 
     <td rowspan="2"> </td> // <-- Middle left 
    </tr> 
    <tr> 
     <td> </td> // <-------------- Bottom right 
    </tr> 
</table> 

你不特定<td>標記，已經被rowspan或colspan「覆蓋」另一個<td>。