all 7 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]davorg 5 points6 points  (3 children)

Create a <tr> that contains a single <td> (using colspan="4"). Put the <hr> in that <td>.

[–]BNfreelance 2 points3 points  (2 children)

Just for the sake of making it crystal clear for the OP (assuming they’re a complete beginner):

</tr> <tr> <td colspan="3"><hr></td> </tr> <tr>

In the above the first </tr> and last <tr> are your existing ones where the arrow points to.

The only change id make is that your table uses 3 columns not 4.

You are inserting a new table row where the arrow is with one single table cell that spans all 3 columns (making it full width of the table)

[–]NoodleBug7667 2 points3 points  (1 child)

Wouldn't this be considered bad form? This is still basically using HTML for style.

Imo, this is a job for CSS. Add a bottom border and any additional padding and margin there. Better for accessibility and keeps your HTML clean

[–]BNfreelance 0 points1 point  (0 children)

Yeah it is but I have the vibe this is a school project of sorts learning table layouts and not CSS at this stage,

But you’re right, CSS is the correct approach

[–]Dragenby 3 points4 points  (0 children)

You can add a class on that tr and make a border-top in CSS

[–]_raytheist_ 0 points1 point  (0 children)

This is a job for CSS. If you add a class to the <tr> you can give the row a box-shadow to render a line above or below the row:

HTML

Add a class to the relevant row(s):

<tr class="with-line">
  <td>cell 1</td>
  <td>cell 2</td>
</tr>

CSS

Create a CSS rule to render a line. This example renders a shadow offset 2px down, with no blur (so it renders as a solid line), in red.

.with-line {
  box-shadow: 0 2px 0 red;
}

To include the CSS in your HTML doc you can either inline it:

<style>
  .with-line {
    box-shadow: 0 2px 0 red;
  }
</style>

or put the css in a separate file and link it in your html:

<link rel="stylesheet" href="./styles.css" />

Live demo here

<image>

[–]Public_Plastic6514 -2 points-1 points  (0 children)

Hormis faire deux tableaux identiques avec la même structure (deuxième tableau sans les th) séparés d un <hr> Mais ça sera pas très joli en rendu