Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add space around table border in HTML?
The border-spacing CSS property adds space between table cells by controlling the distance between adjacent cell borders. This property only works on tables that use the separated borders model (the default), not on tables with collapsed borders.
Syntax
Following is the syntax for adding space around table border in HTML −
border-spacing: value;
The border-spacing property accepts the following values −
Single value − Sets equal horizontal and vertical spacing (e.g.,
border-spacing: 10px;)Two values − Sets horizontal and vertical spacing separately (e.g.,
border-spacing: 10px 5px;)Units − Accepts pixels (px), ems (em), rems (rem), or other CSS length units
Basic Border Spacing
Example − 10px Border Spacing
Following example demonstrates adding 10 pixels of space between table cells −
<!DOCTYPE html>
<html>
<head>
<title>Border Spacing Example</title>
<style>
table, th, td {
border: 1px solid black;
border-spacing: 10px;
}
table {
width: 60%;
margin: 20px auto;
}
th, td {
padding: 8px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<table>
<caption style="margin-bottom: 10px; font-weight: bold;">Employee Details</caption>
<tr>
<th>Employee Name</th>
<th>Employee ID</th>
<th>Department</th>
</tr>
<tr>
<td>John Smith</td>
<td>001</td>
<td>IT</td>
</tr>
<tr>
<td>Sarah Wilson</td>
<td>002</td>
<td>HR</td>
</tr>
<tr>
<td>Mike Johnson</td>
<td>003</td>
<td>Finance</td>
</tr>
</table>
</body>
</html>
The output shows a table with 10 pixels of space between each cell border −
Employee Details +---------------+-------------+----------+ | Employee Name | Employee ID | Department | +---------------+-------------+----------+ | John Smith | 001 | IT | +---------------+-------------+----------+ | Sarah Wilson | 002 | HR | +---------------+-------------+----------+ | Mike Johnson | 003 | Finance | +---------------+-------------+----------+ (Each cell has 10px spacing around its borders)
Different Border Spacing Values
Example − 20px Border Spacing
Following example increases the border spacing to 20 pixels for wider gaps between cells −
<!DOCTYPE html>
<html>
<head>
<title>Larger Border Spacing</title>
<style>
table, th, td {
border: 2px solid #333;
border-spacing: 20px;
}
table {
width: 70%;
margin: 20px auto;
background-color: #f9f9f9;
}
th {
background-color: #4CAF50;
color: white;
padding: 10px;
}
td {
background-color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<table>
<caption style="margin-bottom: 15px; font-size: 18px; font-weight: bold;">Product Inventory</caption>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
<td>15</td>
</tr>
<tr>
<td>Mouse</td>
<td>$25</td>
<td>50</td>
</tr>
<tr>
<td>Keyboard</td>
<td>$75</td>
<td>30</td>
</tr>
</table>
</body>
</html>
The output displays a table with larger 20-pixel spacing and enhanced styling −
Product Inventory +----------+-------+-------+ | Product | Price | Stock | (green header) +----------+-------+-------+ | Laptop | $999 | 15 | +----------+-------+-------+ | Mouse | $25 | 50 | +----------+-------+-------+ | Keyboard | $75 | 30 | +----------+-------+-------+ (Each cell has 20px spacing with gray background)
Horizontal and Vertical Spacing
The border-spacing property can accept two values to set different horizontal and vertical spacing.
Example − Custom Horizontal and Vertical Spacing
<!DOCTYPE html>
<html>
<head>
<title>Custom Border Spacing</title>
<style>
table, th, td {
border: 1px solid #ddd;
border-spacing: 30px 10px; /* 30px horizontal, 10px vertical */
}
table {
width: 80%;
margin: 20px auto;
}
th, td {
padding: 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<table>
<caption style="margin-bottom: 10px; font-size: 16px;">Course Schedule</caption>
<tr>
<th>Course Name</th>
<th>Instructor</th>
<th>Time</th>
<th>Room</th>
</tr>
<tr>
<td>HTML Basics</td>
<td>Dr. Smith</td>
<td>9:00 AM</td>
<td>Room 101</td>
</tr>
<tr>
<td>CSS Styling</td>
<td>Prof. Johnson</td>
<td>11:00 AM</td>
<td>Room 102</td>
</tr>
</table>
</body>
</html>
The output shows a table with 30 pixels horizontal spacing and 10 pixels vertical spacing −
Course Schedule +--------------+----------------+----------+-----------+ | Course Name | Instructor | Time | Room | +--------------+----------------+----------+-----------+ | HTML Basics | Dr. Smith | 9:00 AM | Room 101 | +--------------+----------------+----------+-----------+ | CSS Styling | Prof. Johnson | 11:00 AM | Room 102 | +--------------+----------------+----------+-----------+ (30px horizontal spacing, 10px vertical spacing)
Comparison with Border Collapse
The border-spacing property only works when border-collapse is set to separate (the default). When border-collapse: collapse is used, borders are merged and spacing is ignored.
| Property | Border Separate (default) | Border Collapse |
|---|---|---|
| Border Spacing | Works - creates gaps between cells | Ignored - borders are merged |
| Cell Borders | Each cell has independent borders | Adjacent borders are combined |
| Use Case | Spaced, distinct cell appearance | Clean, continuous border lines |
Browser Compatibility
The border
8K+ Views
