Нужна помощь, чтобы исправить этот 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.

Я не знаю, что вы делали в примере, потому что вам не хватает данных и т. Д. Простейшая вещь - просто показать вам, как это сделать. Только один из ваших колонок нужны Colspan, и только один из ваших рядов необходимы трёе двоеточия, чтобы охватить строки ... (столбец Имени и цветую группировку для строк)

<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

The трёх двоеточия на Имя, цена и исходное значение ячейки ломаются макета. Он должен работать хорошо без них.

<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: использовать <br /> вместо <br>, <strong> вместо <b>, colspan="2" вместо colspan=2 и т. Д.