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 -

       
  
Tables in HTML
 
 
 
First Name 
 
Job role
 
 
 
Tharun
 
Content writer
 
 
 
Akshaj
 
Content writer
 
 
  

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 -

    
  
Technologies
 
 
 
IDE
 
Database
 
 
 
NetBeans IDE
 
MySQL
 
 
  

Separate as value

If we create a collapsed border by passingseparateas the value of theborder-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.

       
  
Tables in HTML
 
 
 
First Name 
 
Job role
 
 
 
Tharun
 
Content writer
 
 
 
Akshaj
 
Content writer
 
 
  

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 -

    
  
Technologies
 
 
 
IDE
 
Database
 
 
 
NetBeans IDE
 
MySQL
 
 
  

Use initial value as value

Ifinitialis 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.

       
  
Tables in HTML
 
 
 
First Name 
 
Job role
 
 
 
Tharun
 
Content writer
 
 
 
Akshaj
 
Content writer
 
 
  

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!