How to create a collapsed border in HTML?

HTMLWeb DevelopmentFront End Technology

We use border-collapse property to create a collapsed border in HTML. The border-collapse is a CSS property used to set the table borders should collapse into a single border or be separated with its own border in HTML.

Border-collapse property has four values: separate, collapse, initial, inherit.

With the value collapse

If you pass collapse as a value of the border-collapse Property, the borders of the table are simply collapsed into a single border. Following is the syntax to create a collapsed border in HTML.

border-collapse: collapse;

Example 1

In the example given below we are trying to create a collapsed 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>

Following is the output for the above example program.

Example 2

Let’s see another example with collapse as a value to 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>

With separate as the value

If we create a collapsed border by passing separate as a 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 collapsed 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>

Following is the output for the above example program.

Example 2

Let’s see another example with separate as a value to 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>

With initial as the value

If you pass initial as a value of the border-collapse Property, it is set to its default value i.e. separate. Following is the syntax, which uses initial attribute of the border-collapse property in HTML.

border-collapse:initial;

Example

Given below is an example, which uses initial attribute of the border-collapse property 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>
raja
Updated on 18-Oct-2022 10:50:33

Advertisements