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?

Solution 1:

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;
}

Solution 2:

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.

Solution 3:

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>

Solution 4:

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