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.