如何在html中为表格放置多条水平线？

我第一次使用html来生成一个可以在发布中使用的漂亮表。我遇到问题<hr>。每次我把它放在图的顶部（见下图）。虽然我确实需要一条生产线，但我还想要一个完全跨越大胆措辞和生长速度与生物量之间的空白线（这基本上分离了两个属）。另外，如果它没有太多的工作，我也会喜欢用水平线来分隔每个模型（即模型生物质上的最后一个可变密度和模型叶绿素上的第一个可变密度 - 每个共生铯）。但是，我希望水平线在Model处停下来。如何在html中为表格放置多条水平线？

希望这是有道理的，我已经链接我的代码下面（我知道格式糟透了！）。

谢谢！

<html> 
 
    <table border=1> 
 
    <table width="100%"> 
 
    
 
    <tr> 
 
     <td><b>Genus</b></td> 
 
     <td><b>Model</b></td> 
 
     <td><b>Variable</b></td> 
 
     <td><b>Importance</b></td> 
 
     <td><b>Fit</b></td> 
 
    </tr> 
 
    <br> 
 
    <hr> 
 

 

 
    
 
    <tr> 
 
     <td rowspan="28"><i>Orbicella spp.</i></td> 
 
     <td rowspan="7">Biomass</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Density</td> 
 
     <td>51.3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Chl_zoox</td> 
 
     <td>20</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td rowspan="7">Chlorophyll per <i>Symbiodinium</i></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td rowspan="7"><i>Symbiodinium</i> Density</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td rowspan="7">Growth Rate</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="23"><i>Acropora spp.</i></td> 
 
     <td rowspan="9">Biomass</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>51.3</td> 
 
     <td></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>Chl_zoox</td> 
 
     <td>20</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td rowspan="7">Chlorophyll per <i>Symbiodinium</i></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    </tr> 
 
     <tr> 
 
     <td rowspan="7"><i>Symbiodinium</i> Density</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 

 
    </table> 
 
     </html>

来源

2016-11-17 Danib90

它混淆了你在使用rowspan的方式，检查文档，没有必要使用空单元 –

@ReneLimon你是什么意思的空单元？我把一些''提供一点点的空间，看看模型之间的分离更容易 – Danib90

HR元素不走这里的路。使用桌面上的边框更容易，更清洁。

CSS

table{ 
    border-collapse: collapse; //collapse all borders so they don't double up 
    border:1px solid #000; //add border around entire table 

} 



tr{ 
    border-top:1px solid #000; //add single line to top of each row 
    border-bottom:1px solid #000; //add single line to bottom of each row 
}

如果你不使用外部CSS，你可以这样做在线 - 但你必须将TR样式添加到每个表行是这样的：

<tr style="border-top:1px solid #000;border-bottom:1px solid #000;">

来源

2016-11-17 23:42:54 Korgrue

这将被添加为一个单独的行或在已有的''？ – Danib90

如果你正在做这个内联，添加到现有的tr。如果可能的话，我会推荐使用CSS。您甚至可以将CSS粘贴在文档的顶部。只需将样式包装在 – Korgrue

完美地工作 - 谢谢！ – Danib90

我看着你的脚本，我注意到你确实声明了<table>两次。两者中的第一个有边框。我建议（你需要），只申报表一次，并结合两个参数为：<table width='100%' border='1'>

二possibilaty是封闭<HR>一个<TD>内。如：<tr><td colspan='7'><hr></td></tr>

第三个选项是使用样式为每个CEL边框（顶部，左分辩，底部）分配individaly在我上面的答案:-)

好运

来源

2016-11-17 23:50:59 jdkos

第一种可能性是在“单元格”周围添加边框。我只是想在上面提到水平线。第二个几乎奏效，但有些线路中断了 - 只是希望有一条连续的线路。 – Danib90

如何在html中为表格放置多条水平线？

回答

相关问题