Advertisements
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>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to set table cellpadding and cellspacing in CSS
- How to set fixed width for td regardless of its content
- How to highlight alternate table row using CSS
Advertisements
