Script Everything

Coding

Add Empty Row In HTML

by

How do you add an empty row in HTML?

To add an empty row in HTML for your table use the code <tr><td colspan="X">&nbsp;</td></tr> otherwise if you want to add an empty row without using a table use the <hr> tag.

Here are some examples demonstrating how adding an empty row looks in your HTML code.

Add Empty Row In HTML Table

To add an empty row in a HTML table insert a table row with a table cell and use the colspan property to span the width of the number of columns in the table. Within the table cell insert an space character so that the browser doesn’t collapse the row.

Here’s a full example of what this would look like: 

<table border='1' cellspacing='0'>
<thead>
<tr><th>Header 1</th><th>Header 2</th>
</thead>
<tbody>
<tr><td>First</td><td>Row</td></tr>
<!-- empty row added next... -->
<tr><td colspan="2">&nbsp;</td></tr>
<tr><td>Final</td><td>Row</td></tr>
</tbody>
</table>

And here’s how the above code looks:

Header 1 Header 2
First Row
Final Row

As you can see, the middle row is empty and blank, and by using the property colspan="2" on the first <td> element the blank row spans the two columns. Without using the colspan property it would mean an empty row would look like this: 

<table border='1' cellspacing='0'>
<thead>
<tr><th>Header 1</th><th>Header 2</th>
</thead>
<tbody>
<tr><td>First</td><td>Row</td></tr>
<!-- empty row added next... -->
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>Final</td><td>Row</td></tr>
</tbody>
</table>
Header 1 Header 2
First Row
Final Row

You can still have an empty row, but instead of spanning just one cell over the width of the two columns, it is just an empty set of cells for that row.

But why use &nbsp; (non-breaking space character) in each cell?

Without the &nbsp; character the row would collapse, as shown below: 

<table border='1' cellspacing='0'>
<thead>
<tr><th>Header 1</th><th>Header 2</th>
</thead>
<tbody>
<tr><td>First</td><td>Row</td></tr>
<!-- empty row added next... -->
<tr><td colspan="2"></td></tr>
<tr><td>Final</td><td>Row</td></tr>
</tbody>
</table>
Header 1 Header 2
First Row
Final Row

Without having some character in the cell, such as a non-breaking space character, browsers will collapse the height of the row. Therefore, it can be easier to insert a non-breaking space character or to add a height style property to the cell, like so: 

<table border='1' cellspacing='0'>
<thead>
<tr><th>Header 1</th><th>Header 2</th>
</thead>
<tbody>
<tr><td>First</td><td>Row</td></tr>
<!-- empty row added next... -->
<tr><td colspan="2" style="height: 1.2rem"></td></tr>
<tr><td>Final</td><td>Row</td></tr>
</tbody>
</table>
Header 1 Header 2
First Row
Final Row

Inserting An Horizontal Row

What if you want to insert a horizontal row between text that isn’t in a HTML table?

A useful tag to insert an empty row between text is the <hr> tag, which inserts a horizontal row between text. Below is an example of what a horizontal row tag looks like: 

<hr>

As you can see from above, the tag <hr> creates a horizontal line. This creates a break of sorts between text.

You can further style the line such that nothing appears by playing with the style="border: 0" attribute, like so: 

<hr style="border: 0">

And above is the application of the <hr> tag with a border property of 0 , and as you can see it looks like an empty row has been inserted within our text.

There are other means of inserting empty lines using HTML which I explore here .

Remove Empty Rows

If you need to remove empty rows in your table, simply look for any of the identified tags listed above, such as:

  • <tr><td>&nbsp;</td><td>&nbsp;</td></tr> (the <td>&nbsp;</td> section could continue repeating depending on the number of columns in the table)
  • <tr><td colspan="X">&nbsp;</td></tr> (with X representing the number of columns in the HTML table)

For example, removing the <tr><td colspan="2">&nbsp;</td></tr> code from this HTML table produces the following result: 

<table border='1' cellspacing='0'>
<thead>
<tr><th>Header 1</th><th>Header 2</th>
</thead>
<tbody>
<tr><td>First</td><td>Row</td></tr>
<!-- remove the next line... -->
<tr><td colspan="2">&nbsp;</td></tr>
<tr><td>Final</td><td>Row</td></tr>
</tbody>
</table>
Header 1 Header 2
First Row
Final Row

Summary

To insert an empty row in a table set the colspan property on a <td> element to the number of columns in your table. To maintain the same height as the rest of the rows in your table use the &nbsp; character, otherwise to set a custom height for the empty row use the style="height: X" property.

To insert an empty row in a wall of text that isn’t in a table use the <hr> element and set the border property to 0 . The <hr> tag will span the width of the text automatically and by setting the border to 0 the line will be removed.