Skip to content
Related Articles
Open in App
Not now

Related Articles

How to set the collapsing borders model for a table ?

Improve Article
Save Article
  • Last Updated : 01 Apr, 2021
Improve Article
Save Article

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. 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!