Using an
tag with a table?

Question

I have a table with borders that are set to "none" in CSS. However, I want to put a horizontal line separating each row on the table. I have tried placing <hr> tags in between each <td> </td> tag for a particular row, but it prints a horizontal black line with small white spaces between each column.

Is there any way to print a horizontal line within a table using a different method?

score 27 · Accepted Answer · edited Jun 04 '18 at 09:41

27

I'd suggest putting:

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

on every row you want the line to be on. You can also do this individually for each cell.

Update

Id recommend using a css class and a have a separate stylesheet if you can. For example

<tr class="bordered"></tr>

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

edited Jun 04 '18 at 09:41

Luke Girvin

13,221
9
64
84

answered Dec 15 '11 at 15:21

Undefined

11,234
5
37
62

1

I wouldn't go with inline styles but use a class instead. – SpaceBeers Dec 16 '11 at 15:03
4

I would personally use a class. But either way works + inline styles is much easier to learn for someone starting out developing emails – Undefined Dec 16 '11 at 16:40
5

I don't think tr can take a border styling directly. See here: http://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr – Beachhouse Jul 30 '14 at 21:46
8

TRs can't get border styling. Not sure why this is the accepted answer, this shouldn't work. – Will Lanni Mar 05 '15 at 21:15
I'm a html novice but I seem to be able to style the borders of my . Using collapse and border 0 for & though.
– Shane Gannon Sep 28 '15 at 16:45
If your hr is faint (not black), try color #d9d9d9 – Mirror318 Mar 07 '16 at 03:40
1

this answer does work, but doesn't state that this only works with the `border-collapse` rule set to `collapse`. – bowl0stu Dec 10 '18 at 22:29
indeed, @marcianx gave a complete example and his example works – SanThee Mar 01 '19 at 21:18
This answer does not actually work and should be unaccepted in favour of one of the other answers below. – Conor Jan 27 '21 at 18:14

score 18 · Answer 2 · answered Dec 15 '11 at 15:29

The best way to add a horizontal line between rows is with a CSS borders. First, you want to collapse all the borders of the table so that there is no space between the cells (this might help your solution as well, but I don't recommend using hr for this purpose). Next, specify a border on the bottom-side of each cell (td). You can similarly put borders to the left, right, up, etc. See the self-contained HTML below.

<html>
<head>
    <style type='text/css'>
        table.test { border-collapse: collapse; }
        table.test td { border-bottom: 1px solid black; }
    </style>
</head>
<body>
    <table class='test'>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    </table>
</body>
</html>

For more border options, check this w3Schools page.

This should be marked as the correct answer, as the accepted one is actually not possible in most modern browsers. Not sure if it was back in '11, but it isn't anymore. — Will Lanni, Mar 06 '15 at 23:19

score 7 · Answer 3 · edited Aug 31 '18 at 07:42

7

You can try this, it is working perfectly:

<tr>
    <td colspan="Number of columns">
        <hr>
    </td>
</tr>

edited Aug 31 '18 at 07:42

Jeffrey Roosendaal

6,872
8
37
55

answered Jul 23 '18 at 05:27

Ran Alcobi

189
1
2
11

DRCB · Answer 4 · 2015-03-09T13:17:27.633

5

You can define a CSS class for your 'separated' <tr>:

<style>
tr.separated td {
    /* set border style for separated rows */
    border-bottom: 1px solid black;
} 

table {
    /* make the border continuous (without gaps between columns) */
    border-collapse: collapse;
}
</style>

Then just mark required rows:

 <tr>
      <td>
      <td>
 </tr>
 <tr class="separated">
      <td>
      <td>
 </tr>
 <tr>
      <td>
      <td>
 </tr>

See example https://jsfiddle.net/64nydcfu/1/

edited Mar 09 '15 at 13:17

answered Dec 15 '11 at 15:26

DRCB

2,111
13
21

TRs can't get border styles. – Will Lanni Mar 05 '15 at 22:29
2

One other thing, which makes this answer almost exactly as one of the others, is that the border may wind up looking broken unless the table has a border-collapse:collapse style on it. I upvoted the answer that has this already in it, but thanks for making the adjustment. I removed the downvote. – Will Lanni Mar 06 '15 at 23:18

score 2 · Answer 5 · edited Mar 19 '17 at 22:46

2

I know this thread hasn't been touched in a while but I came across this possible solution?

For example, if using a 2 column table, use <td colspan="2"></td>. It will span two cells across the two columns, saving the need for any additional CSS.

<tr>
<td>data<td>
<td>data2</td>
</tr>
<td colspan="2"></td>

Please be nice this is my first ever post! :)

edited Mar 19 '17 at 22:46

Pineda

7,435
3
30
45

answered Mar 19 '17 at 22:20

PastyAndPeas

108
1
5

The solution you provide only creates a cell that spans over two columns. The OP's question is asking for **_a way to create a horizontal line to separate each row in a table_**. – Pineda Mar 19 '17 at 22:49
If you put that multiple-column cell inside a new tag, and if you put
inside the cell, you'll get a horizontal line across the table. (Technically, you'll just have created a new row containing just a horizontal line.) It's still a poor solution for OP's problem, but might be useful in some more limited cases. – David K Nov 16 '17 at 17:44

score 2 · Answer 6 · answered Dec 15 '11 at 15:20

2

You can't put anything that isn't a table row inside a table's body.

You should, instead, give a class to the rows that need underlining so you can style them to have a bottom border in your stylesheet.

answered Dec 15 '11 at 15:20

GordonM

31,179
15
87
129

score 1 · Answer 7 · answered Dec 15 '11 at 15:23

You want to put a border on the tr element. Hr is a Horizonal Rule, not a border and shouldn't be used as one.

http://jsfiddle.net/RhaqJ/

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

<table cellpadding="0" cellspacing="0" width="200">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

score 0 · Answer 8 · answered Feb 12 '20 at 20:12

0

All you have to do is to put in a horizontal rule as a new row with no specific Css styling and it will do this for you and very easy to implement. Hope this helps!

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

answered Feb 12 '20 at 20:12

Maurice A. Bonal

1

score 0 · Answer 9 · answered Jun 04 '20 at 03:41

You can use borders but if you want to create an hr tag(so that you can style it) you need to use a div tag inside a td

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            table{
                border: 1px solid black;
            }
            td{
                margin: 0;
            }
            div{
                display: flex;
                justify-content: center;
            }
            hr{
                margin: 0;
                width: 80%;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    1st row
                </td>
            </tr>
            <tr>
                <td>
                    <div><hr></div>
                </td>
            </tr>
            <tr>
                <td>
                    2nd row
                </td>
            </tr>
        </table>
    </body>
</html>

if you have multiple columns, just make sure to use colspan=(x cols) for your td tag:

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            td{
                margin: 0;
            }
            div{
                display: flex;
                justify-content: center;
            }
            hr{
                margin: 0;
                width: 80%;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td colspan="2" style="text-align:center;">
                    1st row
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div><hr></div>
                </td>
            </tr>
            <tr>
                <td>
                    2nd row
                </td>
                <td>
                    2nd row
                </td>
            </tr>
        </table>
    </body>
</html>

score 0 · Answer 10 · answered Dec 15 '11 at 15:25

0

noshade="noshade" attribute help you to remove the shadow and some more idea can be found from this link, I mean CSS based HR line.

And Table based style like

.bottomborder { 
   border-bottom: 1px solid #CECECE; 
}

<td class=border-bottom>

Following doesn't work

<tr class=border-bottom>

answered Dec 15 '11 at 15:25

Sameera Thilakasiri

9,452
10
51
86

1

Wouldn't it be ? – Undefined Dec 16 '11 at 10:29

Using an
tag with a table?

10 Answers10

Linked

Using an tag with a table?

10 Answers10

Linked

Using an
tag with a table?