css
  1. css-border-collapse

CSS Border Collapse

  • The border-collapse property in CSS specifies whether the table borders should be separated or merged together.
  • It is used to control the appearance of table borders in HTML.

Syntax

table {
  border-collapse: separate|collapse|initial|inherit;
}

The border-collapse property is applied to a <table> element and accepts the following values:

  • separate: The table borders will be separated. This is the default value.
  • collapse: The table borders will be merged together.
  • initial: Sets the property to its default value.
  • inherit: Inherits the property from the parent element.

Example

Here is an example of using the border-collapse property in CSS:

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px;
}
Try Playground

In this example, we set the border-collapse property to collapse, which merges the table borders together. We also set the border and padding properties for the table cells to provide additional styling.

Explanation

The border-collapse property controls the spacing between the cells of a table. When set to collapse, the borders of adjacent cells are merged together into a single border, creating a more compact and streamlined appearance. On the other hand, when set to separate, each cell has its own borders, creating a more visible divider between cells.

Use

The border-collapse property is commonly used in HTML tables to control the appearance of table borders. It is useful for creating tables with a more streamlined and professional appearance, or for creating tables that require more space between cells.

Important Points

  • The border-collapse property is only effective on tables with borders.
  • When set to collapse, adjacent cell borders are merged together.
  • When set to separate, each cell has its own borders.

Summary

The border-collapse property in CSS is a valuable tool for controlling the appearance of table borders. By controlling the spacing between table cells, you can create tables that are easy to read and understand. Whether you're creating a basic table or a complex data visualization, the border-collapse property can help you achieve the desired effect.

Published on: