需要幫助解決這個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等