Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a collapsed border in HTML?
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>
13K+ Views
