需要帮助来修复此HTML表

I am trying to make an HTML table like this:

我正在尝试制作这样的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

I came up with this but its wrong and looks ugly :( http://jsbin.com/ayixi

我想出了这个,但它错了,看起来很难看:( http://jsbin.com/ayixi

3 个解决方案

#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)

我不知道你在这个例子中做了什么因为你缺少数据等......最简单的事情就是告诉你如何去做。只有一个列需要一个colspan,并且只有一行需要rowpans来跨越行...(名称列和行的颜色分组)

<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  or a , 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.

如果你想在行之间留一个空格,不要使用
或
,它们都是解决问题的不好方法。您想要将一个类添加到该组的最后一行并在其中添加一些填充。这是最正确的语义,你可以避免在他们不属于的换行符中混音。

#2

You need to look at the colspan and rowspan values. For example in your Table there is the following entry:

您需要查看colspan和rowspan值。例如,在表中有以下条目:

<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

rowspan = 3使得NAMElabel占用太多空间

There are some   elements that where they don't belong:

有一些
元素不属于它们:

       </tr>
<br><br><br>
       <tr height=20  bgColor=>

You may want to modernize your HTML: use   in place of  ,  in place of , colspan="2" in place of colspan=2, etc.

您可能希望对HTML进行现代化改造:使用
代替
,代替,colspan =“2”代替colspan = 2等。

#3

The rowspans on the Name, Price and Original Value cells are breaking your layout. It should work alright without these.

“名称”,“价格”和“原始值”单元格上的rowpans正在破坏您的布局。没有这些,它应该可以正常工作。

<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>

#1