Which of the following is the default value for the border collapse?

In this tutorial, let us look at how to set whether the table border should collapse into a single table border or not with JavaScript.

Nội dung chính Show

Using the Style borderCollapse Property
Return Value
Which of the following are the values of border
Which of the following is used to collapse the border of the table?
What is the default border value in HTML?
What value for Border

We can use the borderCollapse property in JavaScript to accomplish this. Let us look into this in brief.

Using the Style borderCollapse Property

The borderCollapse property defines whether the table border should collapse into a single table border or separate into a double table border. The value 'separate' is the default. The borderCollapse is a read-and-write property.

Users can follow the syntax below to use the borderCollapse property.

Syntax

object.style.borderCollapse = "separate|collapse|initial|inherit|revert|unset"

The syntax above sets the borderCollapse value to the item's style.

Values

separate − Each table cell displays its border separately. The border-spacing and empty-cell property can influence this property.
collapse − All the table cell borders collapse into a single border. The border-spacing and empty-cell property can not influence this property. The border inset style here is groove. The outset style is a ridge.
initial − Sets this property to its default value.
inherit − Inherits the property from the parent element.
revert − Reverts the current value to the default value.
unset − Unsets the property.

Return Value

The return value is a string that represents the borderCollapse property.

Example 1

The program has a table with a separate border by default. Users can change the options and observe the difference. The 'collapse' option sets a single table border, and the 'separate' option sets distinct cell borders.

<html>
<body>
   <style>
      table,
      td {
         border: 1px solid #000;
      }
   </style>
   <h2> Setting the border-collapse value using borderCollapse property </h2>
   <table id="brdColSepTab">
      <tr>
         <th>EmpID</th>
         <th>EmpName</th>
         <th>EmpDept</th>
      </tr>
      <tr>
         <td>001</td>
         <td>Amit</td>
         <td>IT</td>
      </tr>
      <tr>
         <td>002</td>
         <td>John</td>
         <td>Finance</td>
      </tr>
      <tr>
         <td>003</td>
         <td>David</td>
         <td>Marketing</td>
      </tr>
   </table>
   <br>
   <br>
   <div id="brdColSepBtnWrap">
      <input type="radio" name="brdColSepInp" id="brdColSepBtn1"> Collapse </input>
      <input type="radio" name="brdColSepInp" id="brdColSepBtn2" checked> Separate </input>
   </div>
   <script>
      var brdColSepTab = document.getElementById("brdColSepTab");
      var brdColSepBtn1 = document.getElementById("brdColSepBtn1");
      var brdColSepBtn2 = document.getElementById("brdColSepBtn2");
      var brdColSepInpStr = "";
      brdColSepBtn1.onclick = function() {
         brdColSepTab.style.borderCollapse = "collapse";
      };
      brdColSepBtn2.onclick = function() {
         brdColSepTab.style.borderCollapse = "separate";
      };
   </script>
</body>
</html>

Example 2

The program has a table with a separate border by default. The radio button sets the border-collapse value to either reset or unset.

The value collapse changes to the value separate when the user selects the reset or unset option. But the reverse value change is not possible with these options.

<html>
<body>
   <style>
      table,td {
         border: 5px solid pink;
      }
      #brdRevUnstTab {
         border-color: blue;
         border-collapse: collapse;
      }
   </style>
   <h2>Revert or unset border-collapse value using <i>borderCollapse property</i></h2>
   <b id="brdRevUnstOut">Border collapsed</b>
   <br><br>
   <table id="brdRevUnstTab">
      <tr>
         <th>EmpID</th>
         <th>EmpName</th>
         <th>EmpDept</th>
      </tr>
      <tr>
         <td>001</td>
         <td>Amit</td>
         <td>IT</td>
      </tr>
      <tr>
         <td>002</td>
         <td>John</td>
         <td>Finance</td>
      </tr>
      <tr>
         <td>003</td>
         <td>David</td>
         <td>Marketing</td>
      </tr>
   </table>
   <br>
   <br>
   <div id="brdRevUnstBtnWrap">
      <input type="radio" name="brdRevUnstInp" id="brdRevUnstBtn">Revert/Unset</input>
   </div>
   <script>
      var brdRevUnstTab = document.getElementById("brdRevUnstTab");
      var brdRevUnstBtnWrap = document.getElementById("brdRevUnstBtnWrap");
      var brdRevUnstInpStr = "";
      var brdRevUnstBtn = document.getElementById("brdRevUnstBtn");
      var brdRevUnstOut = document.getElementById("brdRevUnstOut");
      brdRevUnstBtn.onclick = function() {
         
         brdRevUnstTab.style.borderCollapse = "revert" || "unset";
         brdRevUnstOut.innerHTML = "Border reset or unset to the default value 'separate'";
      };
   </script>
</body>
</html>

This tutorial taught us the borderCollapse property to separate, collapse, reset or unset the table border. Users can use this property value based on their requirements.

Updated on 15-Nov-2022 10:35:38

Related Questions & Answers
How to set whether the image-border should be repeated, rounded or stretched with JavaScript?
Set whether or not an element should be visible while not facing the screen with JavaScript?
Set whether the flexible items should wrap or not with JavaScript?
How to create a collapsed border in HTML?
How to set the image to be used as a border with JavaScript?
How to know whether the border and background of empty cells are hidden or not with JavaScript?
How to set border width, border style, and border color in one declaration with JavaScript?
With JavaScript how to change the width of a table border?
Set border width with CSS
Set Inset border with CSS
Set Outset border with CSS
How to set whether the text of an element can be selected or not with JavaScript?
Set the border image width with CSS
Set whether the text of the element can be selected or not with CSS
Set a border around navbar with CSS