HTML/CSS/Table Style/empty cells
border-spacing and empty-cells
<source lang="html4strict">
<!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" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>border-spacing and empty-cells</title>
<style type="text/css" media="all">
table {
font: 1em/1.5em Georgia, serif;
border: 1px solid black;
margin: 1em;
border-collapse: separated;
}
td {
background-color: gray;
vertical-align: baseline;
padding: 0 0.5em;
border: 1px dashed black;
}
table.show {
empty-cells: show;
border-spacing: 3em;
}
table.hide {
empty-cells: hide;
border-spacing: 0.5em;
}
</style>
</head> <body>
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | |
| Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | |
| Lorem ipsum dolor |
</body> </html>
</source>
empty-cells: show
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css">
td {
border-style: solid; border-width: 1px; width: 30px;
} table.show {
empty-cells: show;
} table.hide {
empty-cells: hide;
} </style> </head> <body>
| Cell 1 | Cell 2 | Cell4 |
| Cell 1 | Cell 2 | Cell4 |
</body> </html>
</source>
The empty-cells Property
<source lang="html4strict">
Value Purpose show Borders will be shown even if the cell is empty (the default in Netscape). hide Borders will be hidden if cell is empty (the default in IE). inherit Will obey the rules of the containing table (only of use in nested tables).
</source>
