Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to set the collapsing borders model for a table ?

  • Last Updated : 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. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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
Recommended Articles
Page :

Start Your Coding Journey Now!