When working with HTML tables, you may encounter situations where some table cells are empty. By default, browsers handle empty table cells in different ways, which can affect the visual consistency of your tables. The CSS empty-cells property provides a way to control the display of these empty cells, ensuring that your table maintains a consistent appearance.
The empty-cells property is particularly useful for tables that require a uniform look, even when some cells do not contain any content. This property allows you to choose whether to display or hide the borders and background of empty cells, enhancing the visual aesthetics of your tables. In this article, we will explore how to use the empty-cells property effectively, starting with a basic setup and moving on to customization techniques.
Basic Setup
Before we dive into using the empty-cells property, let’s set up a basic example to demonstrate its functionality. We’ll create a simple HTML table with some CSS to define our table structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Cells Example</title>
<style>
table {
width: 100%;
border-collapse: separate;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td></td>
<td>Data 3</td>
</tr>
<tr>
<td></td>
<td>Data 4</td>
<td></td>
</tr>
</table>
</body>
</html>In this code, we define a table with three columns and three rows. Some cells are left empty to demonstrate how the empty-cells property works. The table, headers (th), and data cells (td) are styled with borders and padding to create a visually distinct table.
Using the empty-cells Property
The empty-cells property is used to control the display of table cells that do not contain any content. This property supports two values: show and hide.
empty-cells: show
The empty-cells: show value ensures that empty table cells are displayed with their borders and background. This is the default behavior in most browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Cells Example</title>
<style>
table {
width: 100%;
border-collapse: separate;
empty-cells: show; /* Show empty cells */
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td></td>
<td>Data 3</td>
</tr>
<tr>
<td></td>
<td>Data 4</td>
<td></td>
</tr>
</table>
</body>
</html>In this example, the empty-cells: show; property is applied to the table. This ensures that the borders and background of empty cells are displayed, maintaining a consistent look for the table. When you view this table in a browser, the empty cells will appear with their borders intact.
empty-cells: hide
The empty-cells: hide value hides the borders and background of empty table cells, making them invisible in the table layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Cells Example</title>
<style>
table {
width: 100%;
border-collapse: separate;
empty-cells: hide; /* Hide empty cells */
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td></td>
<td>Data 3</td>
</tr>
<tr>
<td></td>
<td>Data 4</td>
<td></td>
</tr>
</table>
</body>
</html>In this example, the empty-cells: hide; property is applied to the table. This hides the borders and background of empty cells, making them invisible. When you view this table in a browser, the empty cells will not appear, creating a cleaner look for the table layout. It’s imporant to note that the empty-cells property has an effect only when the border-collapse property is separate.
Customizing Table Appearance with empty-cells
The empty-cells property can be combined with other CSS properties to create customized table appearances. Let’s explore how to use empty-cells with background colors and border styles.
Using empty-cells with Background Colors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Cells Example</title>
<style>
table {
width: 100%;
border-collapse: separate;
empty-cells: show; /* Show empty cells */
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
background-color: #f9f9f9;
}
td:empty {
background-color: #e0e0e0; /* Change background color for empty cells */
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td></td>
<td>Data 3</td>
</tr>
<tr>
<td></td>
<td>Data 4</td>
<td></td>
</tr>
</table>
</body>
</html>In this example, the td:empty selector is used to change the background color of empty cells to #e0e0e0, while the empty-cells: show; property ensures that empty cells are displayed with their borders and background. This creates a distinct visual appearance for empty cells, making them easily identifiable.
Using empty-cells with Border Styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Cells Example</title>
<style>
table {
width: 100%;
border-collapse: separate;
empty-cells: show; /* Show empty cells */
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
td:empty {
border: 1px dashed #7b2929; /* Change border style for empty cells */
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td></td>
<td>Data 3</td>
</tr>
<tr>
<td></td>
<td>Data 4</td>
<td></td>
</tr>
</table>
</body>
</html>In this example, the td:empty selector is used to change the border style of empty cells to a dashed border. The empty-cells: show; property ensures that these empty cells are displayed with their new border style, enhancing the visual distinction between filled and empty cells.
Combining empty-cells with Other Table Properties
The empty-cells property can be combined with other table-related CSS properties to create more complex and visually appealing table designs. Let’s explore how to use empty-cells with border-collapse and border-spacing.
Using empty-cells with border-collapse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Cells Example</title>
<style>
table {
width: 100%;
border-collapse: collapse; /* Collapse borders */
empty-cells: show; /* Show empty cells */
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td></td>
<td>Data 3</td>
</tr>
<tr>
<td></td>
<td>Data 4</td>
<td></td>
</tr>
</table>
</body>
</html>In this example, the border-collapse: collapse; property is used to collapse the borders of the table, creating a single border line between adjacent cells. The empty-cells: show; property ensures that empty cells are displayed with their borders, maintaining a consistent look for the table.
Using empty-cells with border-spacing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Cells Example</title>
<style>
table {
width: 100%;
border-collapse: separate; /* Separate borders */
border-spacing: 10px; /* Set spacing between cells */
empty-cells: hide; /* Hide empty cells */
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td></td>
<td>Data 3</td>
</tr>
<tr>
<td></td>
<td>Data 4</td>
<td></td>
</tr>
</table>
</body>
</html>In this example, the border-collapse: separate; property is used to separate the borders of the table, and the border-spacing: 10px; property sets the spacing between cells. The empty-cells: hide; property hides the empty cells, creating a clean and spacious table layout.
Conclusion
The CSS empty-cells property is a powerful tool for controlling the display of empty table cells. By using this property, web designers can ensure that tables maintain a consistent and visually appealing appearance, even when some cells are empty. Whether you choose to show or hide empty cells, the empty-cells property offers flexibility in creating customized table designs.
Experimenting with different empty-cells values and combining them with other CSS properties can help create more accessible and visually appealing web designs. The examples provided in this article serve as a foundation, encouraging further exploration and creativity in using the empty-cells property effectively.
