CSS Empty-Cells Enhance Table Design

Introduction

The empty-cells CSS property controls the visibility of borders and backgrounds in empty table cells, helping to create cleaner and more organized tables.

Specification

The empty-cells property is part of the CSS 2.2 specification.

• CSS 2.2 Specification - Empty-cells

Description

The empty-cells property controls the visibility of borders and backgrounds in empty table cells. It works best when the border-collapse property is set to separate.

Syntax

empty-cells: show;
empty-cells: hide;

/* Global values */
empty-cells: inherit;
empty-cells: initial;
empty-cells: revert;
empty-cells: revert-layer;
empty-cells: unset;

Values

• show: Displays borders and backgrounds in empty cells.
• hide: Hides borders and backgrounds in empty cells.
• inherit: Inherits the value from the parent element.
• initial: Resets to the default value (show).
• revert: Resets to the browser’s default stylesheet value.
• revert-layer: Resets to the value in the previous layer of cascade.
• unset: Resets to the natural value (like inherit if inherited, or like initial if not).

Formal Definition

Examples

HTML

<table class="table_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table_2">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>

CSS

.table_1 {
  empty-cells: show;
}

.table_2 {
  empty-cells: hide;
}

td, th {
  border: 1px solid gray;
  padding: 0.5rem;
}

In this example, table_1 shows borders and backgrounds in the empty cell, while table_2 hides them.

Using inherit and initial Values

HTML

<table class="table_3">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table_4">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>

CSS

.table_3 {
  empty-cells: initial;
}

.table_4 {
  empty-cells: inherit;
}

.parent {
  empty-cells: hide;
}

td, th {
  border: 1px solid gray;
  padding: 0.5rem;
}

In this example, table_3 resets the property to its default value (show), while table_4 inherits the value from its parent element.

Nested Tables with inherit

HTML

<table class="parent">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td>
      <table class="nested">
        <tr>
          <td>DP</td>
          <td>Backtracking</td>
        </tr>
        <tr>
          <td>Sorting</td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

CSS

.parent {
  empty-cells: hide;
}

.nested {
  empty-cells: inherit;
}

td, th {
  border: 1px solid gray;
  padding: 0.5rem;
}

In this example, the empty-cells property is set to hide for the parent table, and the nested table inherits this property.

Supported Browsers

The empty-cells CSS property is widely supported across modern browsers:

• Google Chrome: All versions.
• Microsoft Edge: All versions.
• Mozilla Firefox: All versions.
• Opera: All versions.
• Safari: All versions.

FAQs

What does the empty-cells property do in CSS?

The empty-cells property controls the visibility of borders and backgrounds in table cells that don’t have any visible content.

What values can be used with the empty-cells property?

The empty-cells property accepts show and hide. The show value displays borders and backgrounds in empty cells, while the hide value removes them from view. You can also use global values like inherit, initial, revert, revert-layer, and unset for more control.

When should I use empty-cells: hide?

Use empty-cells: hide when you want to clean up the appearance of tables with many empty cells.

Does empty-cells work with non-table elements?

No, the empty-cells property is specific to table elements and only affects the visibility of empty table cells.

What is the default value for empty-cells?

The default value for empty-cells is show.

How can I check browser compatibility for the empty-cells property?

The empty-cells property is widely supported across major browsers.

Can the empty-cells property be inherited?

Yes, the empty-cells property is inherited.

What is the formal definition of the empty-cells property?

The empty-cells property controls the appearance of borders and backgrounds in table cells that do not contain any visible content. It is part of the CSS 2.2 specification.

How to Use the empty-cells Property

To use the empty-cells property, specify it in your CSS with values like show, hide, inherit, initial, revert, revert-layer, or unset.

table {
  empty-cells: hide;
}

Can I use empty-cells with border-collapse: collapse?

No, the empty-cells property only has an effect when the border-collapse property is set to separate.

Browser Compatibility

The empty-cells CSS property is widely supported across major browsers.

Ensuring Cross-Browser Consistency

To ensure that your tables look consistent across different browsers, it is important to test your web designs in various environments.

Optimizing for SEO

Using the empty-cells property can improve the SEO of your web pages by creating clean and well-structured tables, enhancing readability and user experience.

Conclusion

The empty-cells CSS property is a powerful tool for controlling the appearance of empty table cells, making your tables cleaner and more visually appealing. With wide browser compatibility, you can use this property confidently in your web development and design projects.