New Tutorials:   TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL    Matplotlib    C++ Programs
   CSS  HTML  Web Development  
   Technology    Programming

CSS border-collapse Property for HTML Table

 SEPTEMBER 5, 2020   by HIMANI56

The border-collapse property allows you to define a way in which a border should be displayed around a table cell. To display the border of your table in different styles, you need to set the appropriate values of the border-collapse property.

Here is a table showing the available values of the border-collapse property:

Value Description
collapse seta a common border to all the cells of a table.
separate sets a separate border for each cell of a table.
inherit Inherits the value of the border-collapse property from the parent element.

Now let's see the syntax for using the border-collapse CSS property.

Syntax for border-collapse property:

Following is the syntax for using the border-collapse property:

border-collapse: VALUE;

The VALUES can have values as shown in the table above.

Time for an Example!

Now let's take an example where we will create some HTML tables and then use the border-collapse property to create border around the cells of the table.

When the border-collapse property has value collapse then it sets a common border to all cells of a table.

Browser Support for border-collapse property:

Following browsers support this attribute:

  • Google Chrome 9.0

  • Internet Explorer 11.0

  • Firefox

  • Opera

  • Safari


Subscribe and receive amazing posts directly in your inbox.