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:

1.

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>

2.

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




CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net