Will a table row be displayed if all its cells are empty? - html

Question

I have an empty table row just for separation between rows.
<tr>
<td colspan="5"></td>
</tr>
It's rendered in IE, FF, Opera and Safari. The question is, whether I should put some content inside of it or it is okay to leave it as it is?
Like:
<tr>
<td colspan="5"> </td>
</tr>

Answer 1

Well you could put an as column content to make sure the rows are displayed. The better way is to use CSS for spacing though.

Answer 2

Semantically, does the empty row serve a purpose, or is it purely for layout? If the latter, it may be worth considering dropping the empty row, and providing the separation via CSS. E.g.
<tr class="separate-below">
<td>Data before separater</td><td>More Data</td>...
</tr>
<tr>
<td>Data after separater</td><td>More Data</td>...
</tr>
With the following in the stylesheet:
TR.separate-below TD,TR.separate-below TH {
border-bottom: 1em solid white; /* use the background colour of a cell here */
}
Alternatively, you can use multiple <tbody> elements to group blocks of rows together (adding rules="groups" to the table element causes <tbody> elements to gain a horizontal border at top and bottom, and <colgroup> element to gain a border to their left and right):
<table rules="groups">
<thead>
<tr><th>Header</th><th>Header</th>...</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
...
</table>

Answer 3

As you can see in this example from W3Schools using the is the best way to do what you want.

Answer 4

This is a very old question, but if somebody still needs a solution (problem exists with display: table-cell or table-row elements)
here's the solution:
.emptyElement:after{
content: "\00a0";
}

Answer 5

I wanted to add my solution which is a modification of #Dariusz Sikorski solution.
td:empty:after, th:empty:after {
content: "\00a0";
}

Answer 6

if you want to put content inside, i would use a no-breaking-space: , rather than a normal blank

Answer 7

You may have already tried this but if your trying to add some space in between rows have you tried adding some padding.
CELLSPACING=Length (spacing between cells)
CELLPADDING=Length (spacing within cells)
Karl

Answer 8

To ensure that empty cells are displayed the following CSS can be used:
table { empty-cells:show; }

Answer 9

You can use multiple tbody tags to group table rows. It's totally valid and more semantic.