需要帮助解决这个HTML表格

Question

我试图让一个HTML表是这样的：

Name     Price     Original Value 
RED    ALL   50       10 
       A   980      100 
       B   75       45 

YELLOW   ALL   500      100 
       A   550      150 
       B   80       40 

我想出了这一点，但它的错误和长相丑陋:(http://jsbin.com/ayixi

Answer 1

Your example updated and working。

我不知道你在做什么，因为你缺少数据等等......最简单的事情就是告诉你如何去做。只有你列一个需要合并单元格，只有你行的人需要rowspans跨越的行...（名称列和行的颜色分组）

<style> 
    th { 
    text-align:left; 
    } 
    .endofrow td { 
    padding-bottom:1em; 
    } 
</style> 

<table width="50%" border=1> 
    <tr><th>Name<th colspan=2>Price<th>Original Value</tr> 
    <tr><td rowspan=3 valign=top>Red<td>ALL<td>50<td>10</tr> 
    <tr><td>A<td>980<td>100</tr> 
    <tr class="endofrow"><td>B<td>80<td>50</tr>  
    <tr><td rowspan=3 valign=top>Yellow<td>ALL<td>500<td>100</tr> 
    <tr><td>A<td>980<td>100</tr> 
    <tr class="endofrow"><td>B<td>80<td>50</tr>  
</table> 

（注意，我已经离开结束标记，因为它们将被填充，并且更容易在没有它们的情况下读取表格）

如果你想在行之间有一个空格，不要使用<br> or a <br />，它们对于这个问题来说都不是很好的解决方案。您想要将一个类添加到该组的最后一行，并在其中放入一些填充。这是最符合语义的正确的事情，并且避免在不属于他们的地方换行。

Answer 2

的上rowspans名称，价格和原价细胞破坏了你的布局，应该没有这些工作没有问题。

<td CLASS="trheadermain" colspan=2 rowspan=3 align="center" height=17 ><B>NAME</B></td> 
<td rowspan=2 CLASS="trheadermain" ><B>Price</B></td> 
<td rowspan=2 CLASS="trheadermain" ><B>Original Value</B></td> 

-> 

<td CLASS="trheadermain" colspan=2 align="center" height=17 ><B>NAME</B></td> 
<td CLASS="trheadermain" ><B>Price</B></td> 
<td CLASS="trheadermain" ><B>Original Value</B></td> 

Answer 3

您需要查看colspan和rowspan值。例如，在你的桌子上有如下条目：

<td CLASS="trheadermain" colspan=2 rowspan=3 align="center" height=17> 
<B>NAME</B></td> 

的rowspan=3正在使NAME标签占用太多空间

有一些<br>元素，他们不属于：

 </tr> 
<br><br><br> 
     <tr height=20 bgColor=> 

您可能要现代化您HTML：代替<b>使用<br />代替<br>，<strong>，colspan="2"代替colspan=2等