How to set the collapsing borders model for a table ?

01 Apr, 2021
CSS describes the way HTML elements should be displayed. There are various CSS properties that can add magic to the basic HTML document.
This article is focused on setting the collapsing borders model for the table element of HTML. 
HTML tables allow us to arrange our data using rows and columns. The <table> tag defines an HTML table. Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag. Let us see how we can construct a table that can represent the marks of four students in respective subjects and set the collapsed borders for it as shown below.
Example 1: This example describes the basic example of HTML table.
HTML
<!DOCTYPE html><html>  <head>    <title>css collapse borders</title></head>  <body>    <table>        <tr>            <th>Id</th>            <th>Name</th>            <th>Physics</th>            <th>Chemistry</th>            <th>Maths</th>        </tr>        <tr>            <td>100</td>            <td>Tanmay</td>            <td>98</td>            <td>96</td>            <td>93</td>        </tr>        <tr>            <td>101</td>            <td>Sunaina</td>            <td>90</td>            <td>92</td>            <td>91</td>        </tr>        <tr>            <td>102</td>            <td>Tanisha</td>            <td>89</td>            <td>86</td>            <td>83</td>        </tr>        <tr>            <td>103</td>            <td>David</td>            <td>97</td>            <td>95</td>            <td>94</td>        </tr>    </table></body>  </html>
Output:
HTML Table
Example 2: In this example, we will add some borders to it using the CSS border property as shown in the below example.
HTML
<!DOCTYPE html><html>  <head>    <title>CSS border collapse</title>    <style>        table,        tr,        th,        td {            border: 2px solid black;            border-spacing: 5px;        }    </style></head>  <body>    <table>        <tr>            <th>Id</th>            <th>Name</th>            <th>Physics</th>            <th>Chemistry</th>            <th>Maths</th>        </tr>        <tr>            <td>100</td>            <td>Tanmay</td>            <td>98</td>            <td>96</td>            <td>93</td>        </tr>        <tr>            <td>101</td>            <td>Sunaina</td>            <td>90</td>            <td>92</td>            <td>91</td>        </tr>        <tr>            <td>102</td>            <td>Tanisha</td>            <td>89</td>            <td>86</td>            <td>83</td>        </tr>        <tr>            <td>103</td>            <td>David</td>            <td>97</td>            <td>95</td>            <td>94</td>        </tr>    </table></body>  </html>
Output:
HTML table with borders
On adding the borders to our table, we get the output as shown above. But this may not be the required output, So let us try to collapse these borders to get a more unified output using the border-collapse property and setting its value to collapse as shown in the next example.
Example 3:
HTML
<!DOCTYPE html><html>  <head>    <title>CSS border collapse</title>    <style>        table,        tr,        th,        td {            border: 2px solid black;            border-collapse: collapse;            border-spacing: 5px;        }    </style></head>  <body>    <table>        <tr>            <th>Id</th>            <th>Name</th>            <th>Physics</th>            <th>Chemistry</th>            <th>Maths</th>        </tr>        <tr>            <td>100</td>            <td>Tanmay</td>            <td>98</td>            <td>96</td>            <td>93</td>        </tr>        <tr>            <td>101</td>            <td>Sunaina</td>            <td>90</td>            <td>92</td>            <td>91</td>        </tr>        <tr>            <td>102</td>            <td>Tanisha</td>            <td>89</td>            <td>86</td>            <td>83</td>        </tr>        <tr>            <td>103</td>            <td>David</td>            <td>97</td>            <td>95</td>            <td>94</td>        </tr>    </table></body>  </html>
Output:
Table with collapsed borders
This is our required output, So finally we have learned how to set the collapsed borders for a table. The point to remember is that the border-spacing property will have no effect on the border-collapse property when set to collapse value. 
CSS-Properties
CSS-Questions
HTML-Questions
HTML-Tags
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS