How to create a collapsible border in HTML?-HTML Tutorial-php.cn

Table of Contents

Collapse with value

Example

Tables in HTML

Technologies

Separate as value

Use initial value as value

Home

Web Front-end

HTML Tutorial

How to create a collapsible border in HTML?

Aug 31, 2023 pm 12:13 PM

html folding border Create a folding border html border folding

How to create a collapsible border in HTML?

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.

How to create a collapsible 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;

Copy after login

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 id="Tables-in-HTML">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>

Copy after login

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 id="Technologies">Technologies</h1>
   <table>
      <tr>
         <th>IDE</th>
         <th>Database</th>
      </tr>
      <tr>
         <td>NetBeans IDE</td>
         <td>MySQL</td>
      </tr>
   </table>
</body>
</html>

Copy after login

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;

Copy after login

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 id="Tables-in-HTML">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>

Copy after login

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 id="Technologies">Technologies</h1>
   <table>
   <tr>
      <th>IDE</th>
      <th>Database</th>
   </tr>
   <tr>
      <td>NetBeans IDE</td>
      <td>MySQL</td>
   </tr>
   </table>
</body>
</html>

Copy after login

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;

Copy after login

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 id="Tables-in-HTML">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>

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn