Need help to fix this HTML table

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

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>

Answer 2

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 3

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.