How to create a collapsed border in HTML?

HTMLWeb Development

To create a collapsed border in HTML, use the border-collapse CSS property. This property can have the following values:

Property Value
Description
separate
Borders are detached
collapse
This collapses the border into a single border

Here’s how you can add,

Example

You can try to run the following code to create collapsed border with property collapse:

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         table {border-collapse: collapse; }
         table, td, th { border: 1px solid blue; }
      </style>
   </head>
   <body>
      <h1>Technologies</h1>
      <table>
         <tr>
            <th>IDE</th>
            <th>Database</th>
         </tr>
         <tr>
            <td>NetBeans IDE</td>
            <td>MySQL</td>
         </tr>
      </table>
   </body>
</html>

Example

You can try to run the following code to create a collapsed border with property separate:

<!DOCTYPE html>
<html>
   <head>
      <style>
         table { border-collapse: separate; }
         table, td, th { border: 1px solid blue; }
      </style>
   </head>
   <body>
      <h1>Technologies</h1>
      <table>
         <tr>
            <th>IDE</th>
            <th>Database</th>
         </tr>
         <tr>
            <td>NetBeans IDE</td>
            <td>MySQL</td>
         </tr>
      </table>
   </body>
</html>
raja
Published on 23-Apr-2018 13:59:21
Advertisements