Dealing with Empty Table Cells

If a table data cell doesn't have any data (not even spaces or non-breaking spaces) it simply appears as a blank box, the default width and height of their columns and row. The empty-cells property (Table 9.4) allows us to define what happens to that data cell (most importantly its border) in these cases.

Table 9.4. Empty-Cells Values
VALUE	COMPATIBILITY
show	FF1, O5, S1.3, CSS2
hide	FF1, O5, S1.3, CSS2
inherit	FF1, O5, S1.3, CSS2

In this example (Figure 9.4), empty table data cells have been hidden so that their border and background color are not displayed, leaving an empty gap.

Figure 9.4. In the top table, the empty table data cells are shown, while in the bottom they are hidden so that the table's background color shows through.

To hide empty table data cells:

empty-cells:

Type the empty-cells property name, followed by a colon (Code 9.4).

Code 9.4. The `empty-cells` property lets you show (default) or hide empty table data cells. Hiding them allows the table background to show through instead.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Dealing with Empty Table Cells</title> <style type="text/css" media="screen"> table {      border: 2px solid #f00;      background-color: #fcc; } td {      padding: 5px;      border: 1px solid #f00;      background-color: white; } .hideEmpty { empty-cells: hide; } </style> </head> <body> <table > <caption>Resultsfrom the Queens Croquet Tournament</caption> <tr><th></th><th>1</th><th>2</th><th>3</th> <th>4</th><th>5</th><th>6</th><th>7</th> <th>8< /th><th>Total</th> </tr><tr> <td>Alice</td> ... </tr><tr> <td>Queen</td> ... </tr><tr> <td>Jack</td> ... </tr><tr> <td>Duchess</td> ... </tr></table> </body></html>

hide;

Type either of the following to specify how you want the borders in the table to be treated:

show, which will force the empty data cell to display its background and border
hide, which will leave a visual gap in place of the data cell

Table 9.4. Empty-Cells Values

Figure 9.4. In the top table, the empty table data cells are shown, while in the bottom they are hidden so that the table's background color shows through.

Code 9.4. The empty-cells property lets you show (default) or hide empty table data cells. Hiding them allows the table background to show through instead.

Code 9.4. The `empty-cells` property lets you show (default) or hide empty table data cells. Hiding them allows the table background to show through instead.