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，并且只有一行需要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>

（注意，我已经省略了结束标签，因为它们将被填写并且没有它们更容易阅读表格）

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

Answer 2

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

<td  CLASS="trheadermain" colspan=2 rowspan=3 align="center" height=17>
<B>NAME</B></td>

rowspan=3使NAME标签占用太多空间

有一些 元素不属于它们：

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

您可能希望对HTML进行现代化改造：使用 代替 ，代替，colspan="2"代替{{} 1}}等等。

Answer 3

“名称”，“价格”和“原始值”单元格上的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>

需要帮助来修复此HTML表

3 个答案: