不正確的表渲染

Question

<table width="300" height=100 cellspacing="1" cellpadding="2" border="1"> 
<tbody> 
    <tr> 
    <td width="150" colspan="2" ></td> 
    <td width="75" colspan="1" ></td> 
    </tr> 
    <tr> 
    <td width="75" colspan="1"></td> 
    <td width="150" colspan="2"></td> 
    </tr> 
    <tr> 
    <td width="75" colspan="1" ></td> 
    <td width="150" colspan="2" ></td> 
    </tr> 
    <tr> 
    <td width="75" colspan="1" ></td> 
    <td width="150" colspan="2" ></td> 
    </tr> 
</tbody> 
</table> 

此表看起來像

http://gridwizard.rayz.ru/images/correct.gif

但在現實

http://gridwizard.rayz.ru/images/incorrect.gif

有什麼辦法呢？

Answer 1

四件事情：

1. colspan="1"不是必需的。這是默認值;
2. 你應該傾向於CSS。你在做什麼是不贊成的;
3. 你不需要在每個單元格的寬度。只有第一個（每列）就足夠了;和
4. 使用<col>元素顯式佈局您的列。

例如：

#mytable { width: 300px; height: 100px; border: border-collapse: collapse; } 
#mytable td { border: 1px solid none; } 

與：

<table id="mytable"> 
<col style="width: 75px;"> 
<col style="width: 75px;"> 
<col style="width: 75px;"> 
<tbody> 
    <tr> 
    <td colspan="2">...</td> 
    <td>...</td> 
    </tr> 
    <tr> 
    <td>...</td> 
    <td colspan="2">...</td> 
    </tr> 
    <tr> 
    <td colspan="2">...</td> 
    <td>...</td> 
    </tr> 
    <tr> 
    <td>...</td> 
    <td colspan="2">...</td> 
    </tr> 
</tbody> 
</table> 

Answer 2

發生這種情況是因爲您只定義了兩列，並且一旦定義了足夠的跨度列，colspan才能正常工作。

您可以創建一個由3個單元格組成的虛擬行來定義您的結構，然後跨越將工作。然而，你的手杖和間距會導致你桌子上的一個小小的空隙，所以我建議你使用填充來填充<td>的座標而不是直接放在桌子上。然後，您可以通過不設計樣式來隱藏虛擬列。

<table width="300" height=100 cellspacing="1" cellpadding="2" border="1"> 
<tbody> 
    <tr> 
    <td width="100"></td> 
    <td width="100"></td> 
    <td width="100"></td> 
    </tr> 
    <tr> 
    <td colspan="2">e</td> 
    <td colspan="1">e</td> 
    </tr> 
    <tr> 
    <td colspan="1">e</td> 
    <td colspan="2">e</td> 
    </tr> 
</tbody> 
</table> 

另一種方法是創建一個合適的表頭（<thead> ... </thead>），您標記列，並把細胞在那裏。