HTML/CSS/Table Style/empty cells

Материал из Web эксперт
Перейти к: навигация, поиск

border-spacing and empty-cells

 
<!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>
  <table class="show">
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td></td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum dolor</td>
      <td></td>
    </tr>
  </table>
  <table class="hide">
    <tr>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor</td>
      <td></td>
      <td>Lorem ipsum dolor</td>
    </tr>
    <tr>
      <td></td>
      <td>Lorem ipsum dolor</td>
      <td></td>
    </tr>
  </table>
</body>
</html>



empty-cells: show

 

<?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>
<table class="show">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td></td>
    <td>Cell4</td>
  </tr>
</table>
<table class="hide">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td></td>
    <td>Cell4</td>
  </tr>
</table>
</body>
</html>



The empty-cells Property

 

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).
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/empty_cells&oldid=5075»