1

I want to draw a horizontal line after every rows of my data

<!DOCTYPE html>
<html>
<body>
<table>
    <tr>
        <td>
          data a
        </td>
    </tr>
    <hr/>
    <tr>
        <td>
          data b
        </td>
    </tr>
</table>
</body>
</html>

but my output for my codes is like this 

 __________________________________________________________
 data a
 data b

expect results

 data a
 __________________________________________________________
 data b

additional question

if let's say I have a few tables rows but some rows doesn't requires the horizontal line can I do something like 

 .styletr {border-bottom: 1px solid black;}

and then 

  <tr class=styletr>
  </tr>

?

user2935569
  • 347
  • 2
  • 7
  • 15

6 Answers6

6

The most common method is to use CSS to set the border property of your element, as such:

tr {
    border-bottom: 1px solid #000;
}

In the case of your code, the hr element would not make sense to use.

Josh Beam
  • 19,292
  • 3
  • 45
  • 68
6

I don't think you can use hr inside a table, you are better off using css:

<html>
<head>
<link href="YourCss.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>

and inside "YourCss.css":

tr { border-bottom: 1px solid black; }

EDIT: This will, however, put a border at the bottom of every table row, including the last row, to exclude the last row you will need something like

tr:not(:last-child) { border-bottom: 1px solid black; }

EDIT 2: For greater control over which rows are styled, you should use a class:

<tr class="seperator">...</tr>

.seperator { border-bottom: 1px solid black; }
Ozziereturnz
  • 488
  • 4
  • 8
  • if let's say I have a few tables rows but some rows doesn't requires the horizontal line can I do something like .styletr {border-bottom: 1px solid black;} and then ? – user2935569 Jan 13 '14 at 04:37
  • Spot on, add a class to the s that you want to style, then use that class in the css. – Ozziereturnz Jan 13 '14 at 04:52
5

<hr /> is no longer used as a physical separator between two html sections in HTML5 (see this). Instead it is now a logical separation. You could use border instead.

dotNET
  • 33,414
  • 24
  • 162
  • 251
3

You cannot place elements between tr tags of a table. The browser will simply relocate it to outside of the table when rendering. One option would be to put it in it's own row with a single cell spanning the width of the table

<tr><td><hr /></td></tr>

(If you have more columns use colspan like so)

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

Alternately, if you really only have one column in your table, just move the HR tag into the tag so it's inside the cell.

You could also consider (and I encourage you to) replace the HR tag with bottom borders on the table rows, as other answers have suggested, as that is a much better design approach.

Joel Cox
  • 3,289
  • 1
  • 14
  • 31
2

It's not valid <html> to put anything except <tr>, <thead> or <tbody> as a direct child of a <table> element.

Instead, perhaps try adding css:

tr { border-bottom: 1px solid black; }
Zach Lysobey
  • 14,959
  • 20
  • 95
  • 149
  • @BalvantAhir different email engines support different html/css/... and have their own quirks. Its been a while since I wrote markup for emails, but it might work to *inline* this CSS on the element. That is: `...` – Zach Lysobey Jun 28 '16 at 13:40
  • when i use : its not work... but works.... – Balvant Ahir Jun 29 '16 at 05:37
0

try this :

    <td>
      <hr />
    </td>

if it's an email content

Ani
  • 4,473
  • 4
  • 26
  • 31