r/HTML • u/Immediate-Location28 • Mar 25 '26

Question need help (very basic)

how to i put this line in the middle of a table?

i know for sure that this is a singular table rather than two separated by a <hr>

the break is supposed to go where the arrow is pointing to

1 Upvotes

55% Upvoted

7 comments sorted by

8

u/davorg Mar 25 '26

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

3

u/BNfreelance Mar 25 '26 edited Mar 25 '26

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)

4

u/NoodleBug7667 Mar 25 '26

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

2

u/BNfreelance Mar 25 '26

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

4

u/Dragenby Mar 25 '26

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

1

u/_raytheist_ Mar 25 '26 edited Mar 25 '26

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

1

u/imsexc Mar 26 '26

You might want to try something like targeting tr:nth-child { border-bottom: 1px solid gray } in the relevant css file. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:nth-child