How to Set Space Between Two Rows in an HTML Table
Topic: HTML / CSSPrev|Next
Answer: Use border-collapse & border-spacing Properties
You can simply use the CSS border-collapse property in combination with the border-spacing property to create a gap or set space between two rows in an HTML table.
Let's try out the following example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Add Space Between Two Rows in a Table</title>
<style>
table{
border-collapse: seperate;
border-spacing: 0 25px; /* horizontal and vertical values */
text-align: left;
width: 500px;
}
table tbody tr{
background: #f2f2f2;
}
table tr td{
padding: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
