CSS Border-Collapse Property

In this chapter you will learn:
About border-collapse property
Examples of border-collapse property

Border-collapse property is used to specify that the border of the cells of the table will common or separate. It has two values which are given below-

separate:- This is the default value of border-collapse which request to use of separate border of cells of the table.

collapse:- It is another value of border-collapse which is used to select the model of the table and share a common border for cells of the table.

Examples of border-collapse property:-

Examples 1. border-collapse:separate;
<html>
<head>
<style type="text/css">
 table
{
border-collapse:separate;
border-spacing:3px;
}
</style>
</head>
<body>
<table border="1px">
<tr><td>one</td><td>Ram</td></tr>
<tr><td>two</td><td>Sita</td></tr>
<tr><td>three</td><td>Mohan</td></tr>
</table>
</body>
</html>

Guide:-

In the given program border-collapse value is separate so each cell of the table has its own border.

Output:- output of border-collapse:separate Examples 2. border-collapse:collapse;
<html>
<head>
<style type="text/css">
 table
{
border-collapse:collapse;
border-spacing:3px;
}
</style>
</head>
<body>
<table border="1px">
<tr><td>one</td><td>Ram</td></tr>
<tr><td>two</td><td>Sita</td></tr>
<tr><td>three</td><td>Mohan</td></tr>
</table>
</body>
</html>

Guide:-

In the given program border-collapse value is collapse so cells of the table have the common border.

Output:- output of border-collapse:collapse

Summary

In this chapter, you have learned about the border-collapse property of CSS so if you want to know about more properties of CSS then click on Next button-

More Articles

 

Share your thought



PLEASE DISABLE ADBLOCKER AND SUPPORT US!

Please support us by enabling ads on this page. Refresh

YOU DON'T LIKE ADS, WE ALSO DON'T LIKE ADS!
 
But we have to show ads on our site to keep it free and updated. We have to pay huge server costs, domain costs, CDN Costs, Developer Costs, Electricity and Internet Bill. Your little contribution will encourage us to regularly update this site.