Teach with us

Usage of CSS border-collapse property

The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.

Example

You can try to run the following code to learn how to work with border-collapse property

<html>
   <head>
      <style>
         table.one {
            border-collapse:collapse;
         }
         table.two {
            border-collapse:separate;
         }
         td.a {
            border-style:dotted;
            border-width:2px;
            border-color:#000000;
            padding: 20px;
         }
         td.b {
            border-style:solid;
            border-width:2px;
            border-color:#333333;
            padding:20px;
         }
      </style>
   </head>
   <body>
      <table class = "one">
         <caption>Border Collapse</caption>
         <tr><td class = "a"> India</td></tr>
         <tr><td class = "b"> Australia</td></tr>
      </table>
      <br />
      <table class = "two">
         <caption>Border Separate</caption>
         <tr><td class = "a"> India</td></tr>
         <tr><td class = "b"> Australia</td></tr>
      </table>
   </body>
</html>
Updated on 31-Jan-2020 07:31:10

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements