How to Create a Collapsed Border in HTML ?
The border-collapse is a Property in CSS that is used to set the table borders. It should collapse into a single border or be separated from its border in HTML.
Syntax:
border-collapse: separate|collapse|initial|inherit;
Properties:
- separate: This property is used to set a separate border of a cell. This is the default property.
- collapse: This property is used to collapse adjacent cells and make a common border.
- initial: This property is used to set the border-collapse property to its default value.
- inherit: This property is used when border-collapse property inherits from its parent elements.
Example 1: To demonstrate collapsed table border using separate.
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid blue;
}
#separateTable {
border-collapse: separate;
border-spacing: 5px;
}
</style>
</head>
<body>
<center>
<h2>
border-collapse: separate
</h2>
<table id="separateTable">
<tr>
<th>Name</th>
<th>Season</th>
<th>Cost</th>
</tr>
<tr>
<td>Apple</td>
<td>Winter</td>
<td>50</td>
</tr>
<tr>
<td>Mango</td>
<td>Summer</td>
<td>20</td>
</tr>
<tr>
<td>Banana</td>
<td>All</td>
<td>25</td>
</tr>
<tr>
<td>Grapes</td>
<td>Rainy</td>
<td>100</td>
</tr>
</table>
</center>
</body>
</html>
Output:
Example 2: To demonstrate table border-collapse using collapse.
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid blue;
}
#collapseTable {
border-collapse: collapse;
}
</style>
</head>
<body>
<center>
<h2>
border-collapse: collapse
</h2>
<table id="collapseTable">
<tr>
<th>Name</th>
<th>Season</th>
<th>Cost</th>
</tr>
<tr>
<td>Apple</td>
<td>Winter</td>
<td>50</td>
</tr>
<tr>
<td>Mango</td>
<td>Summer</td>
<td>20</td>
</tr>
<tr>
<td>Banana</td>
<td>All</td>
<td>25</td>
</tr>
<tr>
<td>Grapes</td>
<td>Rainy</td>
<td>100</td>
</tr>
</table>
</center>
</body>
</html>
Output:
Supported Browsers: The browser supported by border-collapse property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 5.0
- Firefox 1.0
- Opera 4.0
- Apple Safari 1.2