CSS Border-Collapse Enhance Table Layout for Web Design

Introduction

The border-collapse property in CSS is essential for web developers designing tables. It controls how borders are managed between adjacent table cells: either shared (collapsed) or distinct (separate). Understanding and using border-collapse can significantly enhance the look and usability of your HTML tables. We’ll cover the definition, syntax, values, and practical examples to help you master this property.

Definition and Purpose

The border-collapse property defines how borders are handled between adjacent cells in an HTML table. When borders are collapsed, adjacent cells share a single border, creating a cleaner and more compact table layout. When borders are separate, each cell retains its own distinct border, resulting in a more spacious and defined structure. This property is crucial for achieving different table styles and maintaining visual consistency.

Syntax

Here’s the basic syntax for the border-collapse property:

/* Keyword values */
border-collapse: collapse;
border-collapse: separate;

/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: revert-layer;
border-collapse: unset;

Values

The border-collapse property accepts the following values:

• collapse: Adjacent cells share borders, creating a more compact table.
• separate: Each cell has its own distinct border, resulting in a more spacious table.
• inherit: Inherits the border-collapse value from the parent element.
• initial: Sets the border-collapse property to its default value.
• revert: Resets the border-collapse property to the user agent’s default.
• revert-layer: Resets the border-collapse property to the value established by the user-agent stylesheet or user stylesheet.
• unset: Resets the border-collapse property to its natural value, behaving like inherit if the property is inherited, or like initial if it is not.

Examples

Let’s explore some practical examples to see how border-collapse works.

Basic Usage of border-collapse

We’ll create two tables: one with border-collapse: separate and another with border-collapse: collapse.

HTML

<table class="separate">
  <caption>
    <code>border-collapse: separate</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>

<table class="collapse">
  <caption>
    <code>border-collapse: collapse</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>

CSS

.collapse {
  border-collapse: collapse;
}

.separate {
  border-collapse: separate;
}

table {
  display: inline-table;
  margin: 1em;
  border: dashed 5px;
}

table th,
table td {
  border: solid 3px;
}

.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ed {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}

Result

In the first table, each cell has its own distinct border, making the table appear more spacious. In the second table, adjacent cells share a single border, creating a cleaner and more compact layout.

Using border-spacing with border-collapse: separate

We’ll demonstrate how to use the border-spacing property with border-collapse: separate to control the distance between the borders of adjacent cells.

HTML

<table class="separate-spacing">
  <caption>
    <code>border-collapse: separate</code> with <code>border-spacing: 10px</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>

CSS

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

.separate-spacing th,
.separate-spacing td {
  border: solid 3px;
}

Result

In this example, the border-spacing property sets the distance between the borders of adjacent cells to 10 pixels, creating a more spacious table layout with clearly defined cell borders.

Using border-collapse: collapse with Different Border Colors

We’ll create a table with border-collapse: collapse and apply different border colors to the cells.

HTML

<table class="collapse-colors">
  <caption>
    <code>border-collapse: collapse</code> with different border colors
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>

CSS

.collapse-colors {
  border-collapse: collapse;
}

.collapse-colors th,
.collapse-colors td {
  border: solid 3px;
}

.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ed {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}

Result

In this example, the table uses border-collapse: collapse, and each cell has a different border color. The shared borders between adjacent cells will take on the color of the thicker or more dominant border, creating a visually interesting effect.

Behavior with border-style

The border-collapse property interacts with the border-style property to determine the visual appearance of table borders.

When border-collapse: collapse is Used

When border-collapse is set to collapse, adjacent cells share a single border. The border-style property directly affects how these shared borders are rendered:

• Inset and Outset Borders: inset behaves like ridge, and outset behaves like groove, creating a beveled effect.
• Border Conflicts: If adjacent cells have different border-style values, the browser determines the shared border’s appearance based on priority rules. For example, solid overrides dotted.

When border-collapse: separate is Used

When border-collapse is set to separate, each cell retains its own distinct border. The border-style property determines the appearance of these individual borders. You can use the border-spacing property to set the distance between borders.

Example: Interaction with border-style

Let’s create a table with different border-style values for the cells.

HTML

<table class="border-styles">
  <caption>
    <code>border-collapse</code> with different <code>border-style</code> values
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="solid">Firefox</td>
      <td class="dotted">Gecko</td>
    </tr>
    <tr>
      <td class="dashed">Edge</td>
      <td class="double">EdgeHTML</td>
    </tr>
    <tr>
      <td class="groove">Safari</td>
      <td class="ridge">Webkit</td>
    </tr>
    <tr>
      <td class="inset">Chrome</td>
      <td class="outset">Blink</td>
    </tr>
    <tr>
      <td class="none">Opera</td>
      <td class="hidden">Blink</td>
    </tr>
  </tbody>
</table>

CSS

.border-styles {
  border-collapse: collapse;
}

.border-styles th,
.border-styles td {
  border: solid 3px;
}

.solid {
  border-style: solid;
}
.dotted {
  border-style: dotted;
}
.dashed {
  border-style: dashed;
}
.double {
  border-style: double;
}
.groove {
  border-style: groove;
}
.ridge {
  border-style: ridge;
}
.inset {
  border-style: inset;
}
.outset {
  border-style: outset;
}
.none {
  border-style: none;
}
.hidden {
  border-style: hidden;
}

Result

In this example, the table uses border-collapse: collapse, and each cell has a different border-style. The shared borders between adjacent cells will reflect the styles based on priority rules, creating a visually interesting effect.

Behavior with border-spacing

The border-collapse property in CSS interacts with the border-spacing property to control the spacing between table cells.

When border-collapse: separate is Used

When the border-collapse property is set to separate, the border-spacing property defines the distance between the borders of adjacent cells. This property allows you to create a more spacious table layout, where each cell retains its own distinct border.

• Horizontal and Vertical Spacing: The border-spacing property can accept one or two values. If a single value is provided, it applies to both horizontal and vertical spacing. If two values are provided, the first value applies to horizontal spacing, and the second value applies to vertical spacing.
• Independent Borders: Each cell’s border is independent of its neighbors, and the border-spacing property ensures that there is a defined space between the borders of adjacent cells.

When border-collapse: collapse is Used

When the border-collapse property is set to collapse, the border-spacing property has no effect. Adjacent cells share a single border, creating a cleaner and more compact table layout. In this mode, the spacing between cells is determined solely by the shared borders.

Example: Using border-spacing with border-collapse: separate

To illustrate how border-spacing works with border-collapse: separate, let’s create a table with different border-spacing values.

HTML

<table class="separate-spacing">
  <caption>
    <code>border-collapse: separate</code> with <code>border-spacing: 10px</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>

CSS

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

.separate-spacing th,
.separate-spacing td {
  border: solid 3px;
}

.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ed {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}

Result

In this example, the border-spacing property is used to set the distance between the borders of adjacent cells to 10 pixels. This creates a more spacious table layout with clearly defined cell borders.

Example: Using border-collapse: collapse

To illustrate how border-spacing has no effect when border-collapse is set to collapse, let’s create a table with border-collapse: collapse.

HTML

<table class="collapse-no-spacing">
  <caption>
    <code>border-collapse: collapse</code> with <code>border-spacing: 10px</code> (no effect)
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>

CSS

.collapse-no-spacing {
  border-collapse: collapse;
  border-spacing: 10px; /* This property has no effect */
}

.collapse-no-spacing th,
.collapse-no-spacing td {
  border: solid 3px;
}

.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ed {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}

Result

In this example, the border-spacing property is set to 10 pixels, but it has no effect because border-collapse is set to collapse. Adjacent cells share a single border, creating a cleaner and more compact table layout without any additional spacing.

Formal Definition

The border-collapse property in CSS is part of the CSS table module, which defines the behavior and appearance of HTML tables. This property controls how table cell borders are rendered, influencing the overall layout and style of the table.

Initial Value

• Initial Value: separate

Applies To

• Applies To: table and inline-table elements

Inherited

• Inherited: Yes

Computed Value

• Computed Value: As specified

Animation Type

• Animation Type: Discrete

Formal Syntax

border-collapse = separate | collapse

Key Points

• separate: This is the default value. When set to separate, each cell in the table has its own distinct border. The distance between the borders of adjacent cells can be defined using the border-spacing property.
• collapse: When set to collapse, adjacent cells share a single border. This creates a more compact and cleaner table layout. The border-spacing property has no effect in this mode.

Specifications

The border-collapse property is specified in the CSS Table Module.

Additional Considerations

• Global Values: In addition to the keyword values separate and collapse, the border-collapse property can also accept global values such as inherit, initial, revert, revert-layer, and unset.
• inherit: The table inherits the border-collapse value from its parent element.
• initial: Sets the border-collapse property to its default value, which is separate.
• revert: Resets the border-collapse property to the value specified by the user agent’s default stylesheet.
• revert-layer: Resets the border-collapse property to the value established by the user-agent stylesheet or user stylesheet.
• unset: Resets the border-collapse property to its natural value, which means it behaves like inherit if the property is inherited, or like initial if it is not.

By understanding the formal syntax and behavior of the border-collapse property, you can effectively control the appearance and spacing of your table borders to meet your design requirements. Experimenting with different border-collapse settings and border-spacing values allows you to create tables that are both visually appealing and functional for your web projects.

CSS Level 2 Revision 2 (CSS 2.2) Specification

The CSS Level 2 Revision 2 (CSS 2.2) Specification introduces the border-collapse property, defining its basic usage and values.

CSS Table Module

The CSS Table Module expands on the border-collapse property, offering advanced features and better control over table layout and styling.

By following these specifications, web developers can ensure their tables are consistently rendered across different browsers and platforms. Understanding these specs helps you use border-collapse effectively to create visually appealing and functional tables.

Important Links

• CSS Level 2 Revision 2 (CSS 2.2) Specification
• CSS Table Module

Browser Compatibility

The border-collapse property is widely supported across modern browsers:

• Google Chrome: Since version 1.0 (December 2008)
• Microsoft Edge: Since version 12.0
• Internet Explorer: Since version 5.0 (July 2000)
• Firefox: Since version 1.0 (November 2004)
• Opera: Since version 4.0 (June 2000)
• Safari: Since version 1.2 (February 2004)

Compatibility Table

Considerations

While border-collapse is well-supported, it’s good practice to test your tables across different browsers to ensure consistent rendering. This is especially important if you target older browser versions or diverse devices and platforms.

Conclusion

The border-collapse property is a powerful tool for controlling table border appearance. Its wide support makes it reliable for creating clean and professional-looking tables. Understanding and using this property enhances your table designs, ensuring a consistent user experience across platforms.

See Also

To deepen your knowledge of CSS and table styling, check out these resources:

• border-spacing: Controls the distance between table cell borders when border-collapse is set to separate.
• border-style: Defines the style of table cell borders, interacting with border-collapse.
• CSS Table Module: Provides advanced features for styling HTML tables.
• HTML <table> Element: Information on the <table> element in HTML.
• CSS Borders Tutorial: Comprehensive guide to working with borders in CSS.
• CSS Tables Tutorial: Focuses on styling HTML tables using CSS.

FAQs

What is the border-collapse property in CSS?

The border-collapse property controls the appearance of table borders, determining whether borders are shared (collapsed) or distinct (separate).

What are the differences between border-collapse: collapse and border-collapse: separate?

• collapse: Adjacent cells share a single border, creating a cleaner, more compact table layout.
• separate: Each cell has its own distinct border, resulting in a more spacious table structure.

When should I use border-collapse: collapse?

Use border-collapse: collapse for a more streamlined table with shared borders between adjacent cells. It’s ideal for minimalist designs or when space efficiency is important.

Does border-collapse affect the padding inside table cells?

Yes, border-collapse: collapse affects padding within the collapsed borders, potentially impacting table content spacing. In contrast, padding behaves more independently with border-collapse: separate.

Why is my table border behaving unexpectedly with border-collapse?

Unexpected behavior can arise from conflicting styles between border-spacing, border-width, or cell padding when border-collapse: collapse is applied. Review these settings and ensure no conflicting styles override the border-collapse property.

Can I use border-collapse with other CSS properties?

Yes, border-collapse can be used with other CSS properties to achieve various table styles. For example, use the border-spacing property with border-collapse: separate to control the distance between table cells.

How do I reset the border-collapse property to its default value?

Use the initial keyword to reset border-collapse to its default value:

border-collapse: initial;

This sets border-collapse to separate.

What browsers support the border-collapse property?

The border-collapse property is supported in:

• Google Chrome: Since version 1.0 (December 2008)
• Microsoft Edge: Since version 12.0
• Internet Explorer: Since version 5.0 (July 2000)
• Firefox: Since version 1.0 (November 2004)
• Opera: Since version 4.0 (June 2000)
• Safari: Since version 1.2 (February 2004)

How does border-collapse interact with the border-style property?

border-collapse interacts with border-style to determine the visual appearance of table borders. With border-collapse: collapse, shared borders are styled according to border-style. With border-collapse: separate, each cell’s border is styled individually.

Can I use border-collapse with the border-spacing property?

Yes, use the border-spacing property with border-collapse: separate to control the distance between table cell borders. When border-collapse is set to collapse, border-spacing has no effect, as adjacent cells share a single border.

By understanding these FAQs, you can effectively use the border-collapse property to create visually appealing and functional tables in your web projects. Experiment with different values and styles to achieve your desired table layout and appearance.