需要幫助來修復此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>