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 create a collapsed border in HTML?
The border-collapse property is a CSS property used to control how table borders are displayed. When set to collapse, it merges adjacent table cell borders into a single border, creating a cleaner appearance. When set to separate, each cell maintains its own individual border.
Syntax
Following is the syntax for the border-collapse property −
border-collapse: value;
The border-collapse property accepts the following values −
collapse − Borders are collapsed into a single border
separate − Borders are kept separate (default behavior)
initial − Sets the property to its default value (separate)
inherit − Inherits the value from the parent element
Using Collapsed Borders
The collapse value merges adjacent borders between table cells into a single border. This creates a more professional and clean appearance for tables.
Example − Basic Collapsed Borders
<!DOCTYPE html>
<html>
<head>
<title>Collapsed Borders Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Employee Table with Collapsed Borders</h2>
<table>
<tr>
<th>First Name</th>
<th>Job Role</th>
</tr>
<tr>
<td>Tharun</td>
<td>Content Writer</td>
</tr>
<tr>
<td>Akshaj</td>
<td>Content Writer</td>
</tr>
</table>
</body>
</html>
The output displays a table with single, merged borders between cells −
Employee Table with Collapsed Borders +----------+----------------+ |First Name| Job Role | +----------+----------------+ |Tharun | Content Writer | +----------+----------------+ |Akshaj | Content Writer | +----------+----------------+
Example − Styled Collapsed Borders
<!DOCTYPE html>
<html>
<head>
<title>Styled Collapsed Borders</title>
<style>
table {
border-collapse: collapse;
width: 300px;
}
th, td {
border: 2px solid blue;
padding: 10px;
text-align: center;
}
th {
background-color: lightblue;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Technologies Table</h2>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html>
The output shows a table with blue collapsed borders and a light blue header −
Technologies Table +-------------+----------+ | IDE | Database | (light blue background) +-------------+----------+ | NetBeans IDE| MySQL | +-------------+----------+
Using Separated Borders
The separate value keeps individual borders around each table cell, creating gaps between adjacent borders. This is the default behavior for table borders.
Example − Separated Borders
<!DOCTYPE html>
<html>
<head>
<title>Separated Borders Example</title>
<style>
table {
border-collapse: separate;
border-spacing: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Employee Table with Separated Borders</h2>
<table>
<tr>
<th>First Name</th>
<th>Job Role</th>
</tr>
<tr>
<td>Tharun</td>
<td>Content Writer</td>
</tr>
<tr>
<td>Akshaj</td>
<td>Content Writer</td>
</tr>
</table>
</body>
</html>
The output shows individual borders around each cell with spacing −
Employee Table with Separated Borders ???????????? ?????????????????? ?First Name? ? Job Role ? ???????????? ?????????????????? ???????????? ?????????????????? ?Tharun ? ? Content Writer ? ???????????? ?????????????????? ???????????? ?????????????????? ?Akshaj ? ? Content Writer ? ???????????? ??????????????????
Using Initial Value
The initial value resets the border-collapse property to its default value, which is separate.
Example − Initial Value
<!DOCTYPE html>
<html>
<head>
<title>Border-Collapse Initial Value</title>
<style>
table {
border-collapse: initial;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Table with Initial Border-Collapse</h2>
<table>
<tr>
<th>First Name</th>
<th>Job Role</th>
</tr>
<tr>
<td>Tharun</td>
<td>Content Writer</td>
</tr>
</table>
</body>
</html>
Since initial sets the property to its default value (separate), the output shows separated borders around each cell.
Comparison of Border-Collapse Values
| Value | Description | Visual Result |
|---|---|---|
collapse |
Adjacent borders are merged into a single border | Clean, professional table appearance |
separate |
Each cell maintains its own individual borders | Double borders with gaps between cells |
initial |
Resets to default value (separate) | Same as separate |
inherit |
Inherits value from parent element | Depends on parent's border-collapse value |
Conclusion
The border-collapse property controls how table borders are displayed. Use collapse to create clean, professional tables with single borders, or separate for distinct cell boundaries. The collapsed border approach is generally preferred for data tables as it provides better visual clarity and a more polished appearance.
16K+ Views
