需要帮助来修复此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

您的示例已更新且正在运行 。

我不知道您在示例中正在做什么，因为您缺少数据等。最简单的事情就是向您展示如何进行操作。 您的只有一列需要使用colspan，而只有一行需要使用panspan来覆盖行...（名称列和行的颜色分组）

<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

您需要查看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：使用<br />代替<br> ，用<strong>代替<b> ，用colspan="2"代替colspan=2 ，等等。

Answer 3

“名称”，“价格”和“原始值”单元格上的行跨度破坏了您的布局。 没有这些，它应该可以正常工作。

<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>