🧱 CSS Tutorial: border-collapse

📌 Introduction

The border-collapse property in CSS determines how table borders are rendered. It controls whether the borders of table cells are separated (default) or collapsed into a single shared border. This property is essential when styling HTML tables for cleaner layouts, consistent spacing, and reduced border clutter. 📊✨

🎯 What Does border-collapse Do?

  • Controls how table borders behave
  • Allows collapsing all inner borders into one
  • Reduces double borders in table designs
  • Works only on <table> elements

✨ Syntax

Syntax

table {
  border-collapse: separate | collapse;
}

🧩 Values Explained

1. separate (default)

Borders remain independent for each table cell. There is space between cells (controlled using border-spacing).

separate (default)

table {
  border-collapse: separate;
  border-spacing: 10px;
}

2. collapse

Adjacent borders are merged into a single border. This gives a cleaner, grid-like table appearance.

collapse

table {
  border-collapse: collapse;
}

Note

When border-collapse: collapse is used, theborder-spacing property is ignored.

🔥 Practical Examples

1. A Table With Separate Borders

Separate Borders Example

table {
  border-collapse: separate;
  border-spacing: 8px;
}

td, th {
  border: 2px solid #333;
  padding: 10px;
}

2. A Clean Collapsed Border Table

Collapsed Borders Example

table {
  border-collapse: collapse;
}

td, th {
  border: 2px solid #666;
  padding: 10px;
}

3. Styling With Collapse for Grid-Like Layout

Grid Table

.grid-table {
  border-collapse: collapse;
}

.grid-table td {
  border: 1px solid #999;
  padding: 6px;
}

4. Rounded Corners Only on Outer Table

When borders collapse, you can style the table border as a whole.

Rounded Table

table {
  border-collapse: collapse;
  border: 2px solid #333;
  border-radius: 8px;
}

td {
  border: 1px solid #aaa;
  padding: 8px;
}

📊 border-collapse vs border-spacing

PropertyUsed WithMeaning
border-collapse: separate✔ border-spacing worksCells have gaps between them
border-collapse: collapse✘ border-spacing ignoredAll borders merge into one

🧠 Tips & Best Practices

  • Use collapse to create clean, minimal, grid-like tables (great for data tables)
  • Use separate when you want spacing between cells or custom rounded borders per cell
  • Combine border-collapse: collapse with th styles for neat header rows
  • For modern UI tables, collapse usually looks cleaner and more professional
>>“The right border style transforms a simple table into a clean and readable data layout.” ✨

🎉 Conclusion

The border-collapse property is essential for controlling how table borders behave. Whether you want clean grid-like tables or spaced-out cells, this property allows precise control over table layout and visual structure. Mastering it will help you build elegant, readable, and professional-looking data tables. 🚀