Mastering CSS `border-collapse`: Creating Clean and Professional HTML Tables

Learn how to effectively style HTML table borders using the CSS `border-collapse` property. This tutorial explains the `separate` and `collapse` values, demonstrating how to create clean, visually appealing tables by controlling border spacing and merging adjacent cell borders.

Mastering CSS `border-collapse` for Table Styling

The CSS `border-collapse` property is a powerful tool for controlling how borders appear in HTML tables. It lets you create clean, compact tables or maintain the default spaced-out look.

Understanding `border-collapse`

By default, HTML table cells have separate borders, creating gaps between them. `border-collapse` lets you change this behavior, either collapsing the borders together or keeping them separate.

`border-collapse` Values

The `border-collapse` property accepts two main values:

`separate`

(Default) Each cell gets its own border, resulting in gaps between adjacent cells. You can adjust the spacing between these borders using the `border-spacing` property.

`collapse`

Adjacent cells share a single border, creating a cleaner, more compact table. The `border-spacing` property is ignored when `border-collapse: collapse;` is used.

How to Use `border-collapse`

Apply `border-collapse` to the `

Syntax

table {
  border-collapse: collapse; /* or separate */
}

Example: `separate` vs. `collapse`

Example 1: `separate`

This example shows a table with separate borders, demonstrating the effect of `border-spacing`.

Test it Now

Example 2: `collapse`

This example shows a table with collapsed borders. Note that `border-spacing` and `border-radius` will be ignored.

Test it Now

Another Example: Collapsed Borders

A simple example demonstrating collapsed borders.

Test it Now

Cell Spacing vs. Cell Padding

It's important to understand the difference:

• Cell Spacing: The space *between* cells (only applies when `border-collapse: separate;`).
• Cell Padding: The space *inside* a cell, between the content and the border.

Nested Tables and `border-collapse`

If you have nested tables (tables within tables), `border-collapse: collapse;` on a parent table will also apply to its child tables, creating a seamless look.

Browser Compatibility and Best Practices

`border-collapse` is widely supported, but always test across different browsers. Remember to prioritize accessibility; ensure styling changes don't hinder readability, especially for users of assistive technologies. Use tables semantically – for tabular data. For other layouts, consider alternative approaches.

Conclusion

The `border-collapse` property is a simple yet powerful CSS tool that greatly impacts the visual presentation of tables. Using it effectively improves the appearance and readability of your tables.