對齊表中的元素

Question

我希望頂部4個元素在頂部和底部兩個之間伸展，看起來也屬於同一張桌子，並且不會被擠壓。我可以在不添加空<td>的情況下完成此操作嗎？

這是怎麼看起來像現在： http://www.w3schools.com/code/tryit.asp?filename=F0OOEL3HH55Y

我的代碼：

<table cellspacing="2" cellpadding="2" width="650" border="0"> 
    <tr> 
     <td height="8" class="header" width="300">Weight Per Book (lb.)</td> 
     <td height="8" class="header" width="300">Cost per Book</td> 
     <td height="8" class="header" width="200">Quantity for whole order</td> 
     <td height="8" class="header" width="400">Capability Complexity Level For TO</td> 
    </tr> 
    <tr> 
     <td height="16">2.0</td> 
     <td height="16">0.00</td> 
     <td height="16">0</td> 
     <td height="16">4</td> 
    </tr> 
    <tr valign="bottom"> 
     <td class="header">Distribute ID Order to Home Plant</td> 
     <td class="header">Distribute All OTR's to Home Plant</td> 
    </tr> 
    <tr> 
     <td>No</td> 
     <td>No</td> 
    </tr> 
</table> 

Answer 1

可以使用colspan屬性來做到這一點。該屬性定義特定單元格應該跨越的列數。

下面是一個例子：

<table cellspacing="2" cellpadding="2" width="650" border="0"> 
 
    <tr> 
 
    <th colspan="4">Production</th> 
 
    </tr> 
 
    <tr> 
 
    <td height="8" class="header" width="300">Weight Per Book (lb.)</td> 
 
    <td height="8" class="header" width="300">Cost per Book</td> 
 
    <td height="8" class="header" width="200">Quantity for whole order</td> 
 
    <td height="8" class="header" width="400">Capability Complexity Level For TO</td> 
 
    </tr> 
 
    <tr> 
 
    <td height="16">2.0</td> 
 
    <td height="16">0.00</td> 
 
    <td height="16">0</td> 
 
    <td height="16">4</td> 
 
    </tr> 
 
    <tr valign="bottom"> 
 
    <td colspan="2" class="header">Distribute ID Order to Home Plant</td> 
 
    <td colspan="2" class="header">Distribute All OTR's to Home Plant</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">No</td> 
 
    <td colspan="2">No</td> 
 
    </tr> 
 
</table>

希望這有助於！