CODEWITHSUNDEEP
htmlhtml-table
Milos Cuculovic
Milos Cuculovic

Reputation: 20223

How to separate table rows with a line

I have a basic HTML table which contains table rows. My goal is to separate those table rows with a visible line (for better readability of the content).

How could I do this?

Upvotes: 76

Views: 271842

Answers (8)

Dgloria
Dgloria

Reputation: 301

Set colspan to your number of columns, and background color as you wish

<tr style="background: #aaa;">
 <td colspan="2"></td>
</tr>

Upvotes: 1

EL.ALEX78UK
EL.ALEX78UK

Reputation: 109

If you don't want to use CSS try this one between your rows:

    <tr>
    <td class="divider"><hr /></td>
    </tr>

Cheers!!

Upvotes: 2

Bruno
Bruno

Reputation: 6000

You could use the border-bottom css property.

table {
  border-collapse: collapse;
}

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

table tr:last-child {
  border: 0;
}
<table>
  <tr>
    <td>1</td>
    <td>Foo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Bar</td>
  </tr>
</table>

Upvotes: 15

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

There are several ways to do that. Using HTML alone, you can write

<table border=1 frame=void rules=rows>

or, if you want a border above the first row and below the last row too,

<table border=1 frame=hsides rules=rows>

This is rather inflexible, though; you cannot e.g. make the lines dotted this way, or thicker than one pixel. This is why in the past people used special separator rows, consisting of nothing but some content intended to produce a line (it gets somewhat dirty, especially when you need to make rows e.g. just a few pixels high, but it’s possible).

For the most of it, people nowadays use CSS border properties for the purpose. It’s fairly simple and cross-browser. But note that to make the lines continuous, you need to prevent spacing between cells, using either the cellspacing=0 attribute in the table tag or the CSS rule table { border-collapse: collapse; }. Removing such spacing may necessitate adding some padding (with CSS, preferably) inside the cells.

At the simplest, you could use

<style>
table {
  border-collapse: collapse;
}
tr { 
  border: solid;
  border-width: 1px 0;
}
</style>

This puts a border above the first row and below the last row too. To prevent that, add e.g. the following into the style sheet:

tr:first-child {
  border-top: none;
}
tr:last-child {
  border-bottom: none;
}

Upvotes: 100

AndreaNobili
AndreaNobili

Reputation: 42957

You have to use CSS.

In my opinion when you have a table often it is good with a separate line each side of the line.

Try this code:

HTML:

<table>
    <tr class="row"><td>row 1</td></tr>
    <tr class="row"><td>row 2</td></tr>
</table>

CSS:

.row {
    border:1px solid black; 
}

Bye

Andrea

Upvotes: 7

chridam
chridam

Reputation: 103365

HTML

<table cellspacing="0">
  <tr class="top bottom row">
    <td>one one</td>
    <td>one two</td>
  </tr>
  <tr class="top bottom row">
    <td>two one</td>
    <td>two two</td>
  </tr>
  <tr class="top bottom row">
    <td>three one</td>
    <td>three two</td>
  </tr>

</table>​

CSS:

tr.top td { border-top: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
tr.row td:first-child { border-left: thin solid black; }
tr.row td:last-child { border-right: thin solid black; }​

DEMO

Upvotes: 3

cem
cem

Reputation: 3321

Just style the border of the rows:

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

table tr:last-child { 
    border-bottom: none; 
}

Here is a fiddle.

Edited as mentioned by @pkyeck. The second style avoids the line under the last row. Maybe you are looking for this.

Upvotes: 21

looper
looper

Reputation: 1979

Style the row-element with css:

border-bottom: 1px solid black;

Upvotes: 1

Related Questions