How to set the collapsing borders model for a table ?
Last Updated :
22 May, 2023
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 their respective subjects and set the collapsed borders for it as shown below.
Example 1: This example describes the basic example of an 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: In this example, we are using the above-explained approach border-collapse property.
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.
Share your thoughts in the comments
Please Login to comment...