Need help to fix this HTML table - html

Question

I am trying to make an HTML table like this:
Name Price Original Value
RED ALL 50 10
A 980 100
B 75 45
YELLOW ALL 500 100
A 550 150
B 80 40
I came up with this but its wrong and looks ugly :( http://jsbin.com/ayixi

Answer 1

Your example updated and working.
I don't know what you were doing in the example because you're missing data etc... The simplest thing to do is just show you how to go about it. Only one of your columns needs a colspan, and only one of your rows needs rowspans to span the rows... (the name column and the color grouping for the rows)
<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>
(note, I've left out the closing tags as they will be filled in and it's easier to read the tables without them)
If you want a space between rows, don't use a <br> or a <br />, they are both a poor solution to the problem. You want to add a class to the final row of that group and put some padding in there. That's the most semantically correct thing to do, and you avoid mixing in line breaks where they don't belong.

Answer 2

You need to look at the colspan and rowspan values. For example in your Table there is the following entry:
<td CLASS="trheadermain" colspan=2 rowspan=3 align="center" height=17>
<B>NAME</B></td>
The rowspan=3 is making the NAMElabel take up too much space
There are some <br> elements that where they don't belong:
</tr>
<br><br><br>
<tr height=20 bgColor=>
You may want to modernize your HTML: use <br /> in place of <br>, <strong> in place of <b>, colspan="2" in place of colspan=2, etc.

Answer 3

The rowspans on the Name, Price and Original Value cells are breaking your layout. It should work alright without these.
<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>