How to separate two tr's in an html table

Question

Is there a possibility to have a visual separator between two lines (tr) in an HTML table.

I tried with a <br> but this is not valid code.

I tried do add a padding-top to the tr after the break but it does not work.

Currently I use an empty line:

<tr><td colspan=\"X\">&nbsp;</td></tr>

but I don't think this is the best solution, especially as I have to make sure the colspan is adjusted if there is a change is the number of columns.

Is there any way to solve this?

Answer 1

Edited to reflect my re-reading the question rather than the title of the question (original answer remains below the rule).

If you want a visual separator (rather than simply white-space) then simply use:

td {
border-bottom: 1px solid #ccc; /* or whatever specific values you prefer */
}

---

The only way to increase spacing between table rows, that I'm currently aware of, is to use padding on individual rows/cells:

td {
    padding: 0.5em 1em;
    border: 1px solid #ccc;
}

JS Fiddle demo

Although there is the potential to use transparent (or background-color-ed borders):

table {
    border-collapse: separate;
}

td {
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
}

td:hover {
    border-color: #ccc;
}

JS Fiddle demo

Answer 2

The <tr /> element is not stylable in all browsers however you could always add the padding or a bottom-border to the cells within the tr.

Answer 3

Actually, I use separate trs for this purpose all the time. I style them (e.g. the one td within) via a separator class.

About the colspan-problem see Colspan all columns.