CODEWITHSUNDEEP
html
Danib90
Danib90

Reputation: 181

How to place multiple horizontal lines for a table in html?

I am using html for the first time to generate a nice table that can be potentially used in a publication. I am having issues placing <hr>. Every time I do it places the line at the top of the figure (see figure below). While I do want a line there, I would also like a line that goes fully across below the bold wording and in the space between growth rate and biomass (this essentially separates the two genera).

Additionally, if its not to much work, I would also like horizontal lines that separate each model (i.e. between the last Variable Density on Model Biomass and the first variable Density on Model Chlorophyll per Symbiodinium). However, I want the horizontal lines to stop at Model.

Hope this makes sense and I have linked my code below (I know the formatting sucks!).

Thanks!

enter image description here

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

Upvotes: 0

Views: 457

Answers (2)

jdkos
jdkos

Reputation: 7

I looked at youre script and I noticed that you did declare <table> twice. The first one of the two has the border. I suggest (you need) to only declare the table once and combine both arguments as in: <table width='100%' border='1'>

Second possibilaty is to enclose the <HR> within a <TD>. as in: <tr><td colspan='7'><hr></td></tr>

A third option is using style to assign a border (top, left rigth, bottom) for each cel individaly as in the answer above me :-)

Good luck

Upvotes: 1

Korgrue
Korgrue

Reputation: 3478

Hr elements are not the way to go here. Much easier, and cleaner to just use borders on your table.

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
}

If you are not using external CSS, you can do this inline - but you will have to add the tr style to each table row like this:

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

Upvotes: 2

Related Questions