对齐表中的元素

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>

希望这有助于！