Home > Article > Web Front-end > How to create a collapsible border in HTML?
How to create a collapsible border in HTML?
- WBOYforward
- 2023-08-31 12:13:051617browse
We use the border-collapse attribute to create a collapsed border in HTML. border-collapse is a CSS property that sets whether the table border should collapse into a single border or be separated from its own border in HTML.
Border-collapse attribute has four values: separate, collapse, initial, inherit.
Collapse with value
If collapse is passed as the value of the border-collapse property, the table's border will simply collapse to a single border. Following is the syntax for creating a collapsible border in HTML.
border-collapse: collapse;
Example 1
In the example given below, we are trying to create a folding border in HTML -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<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 following is the output of the above example program.
Example 2
Let's look at another example, using collapse as the value of the border-collapse property -
<!DOCTYPE html>
<html>
<head>
<style>
table {border-collapse: collapse; }
table, td, th { border: 1px solid blue; }
</style>
</head>
<body>
<h1>Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html>
Separate as value
If we create a collapsed border by passing separate as the value of the border-collapse property , the individual cells will be wrapped in separate borders.
border-collapse:separate;
Example 1
In the example given below, we are trying to create a separate collapsible border in HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
border-collapse:separate;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<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 following is the output of the above example program.
Example 2
Let's look at another example where split is used as the value of the border-collapse property -
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
}
table,
td,
th {
border: 1px solid blue;
}
</style>
</head>
<body>
<h1>Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html>
Use initial value as value
If initial is passed as the value of the border-collapse property, it will be set to its default value, which is alone. Below is the syntax, which uses the initial properties of the border-collapse attribute in HTML.
border-collapse:initial;
Example
An example is given below, which uses the initial attribute of the border-collapse attribute in HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
border-collapse:initial;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<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 above is the detailed content of How to create a collapsible border in HTML?. For more information, please follow other related articles on the PHP Chinese website!