visibilityのレンダリング

visible hidden (表示、非表示)

データ	データ
データ	データ

データ	データ
データ	データ

こんにちは　こんにちは　こんにちは　こんにちは

<table border="1">
<tr style="visibility:visible;"><td>データ<td>データ
<tr style="visibility:visible;"><td>データ<td>データ
</table><br>

<table border="1">
<tr style="visibility:hidden;"><td>データ<td>データ
<tr style="visibility:visible;"><td>データ<td>データ
</table><br>

<div style="visibility:visible; background:#def;">こんにちは　こんにちは　こんにちは　こんにちは</div>
<div style="visibility:hidden; background:#ff9;">こんにちは　こんにちは　こんにちは　こんにちは</div>
<div style="visibility:visible; background:#cf9;">こんにちは　こんにちは　こんにちは　こんにちは</div>

*1 CSS2.1で「初期値：visible」に正式に変更されましたが、一般的にボックスの表示は常に行われるので、visibility:visible;は記述しなくても良いものです。値visibleは、主にスクリプトなどを用いて、表示、非表示を動的に切り替える際に指定します。

collapse (テーブルの指定した行や列を取り除く)

Firefox3のサンプル画像

<table border="1">
<caption>表題</caption>
<colgroup span="1" width="100"></colgroup>
<colgroup span="4" width="100">
  <col span="1" width="90">
  <col span="1" width="80">
  <col span="1" width="70" style="visibility:collapse; background:#def;">
  <col span="1" width="60">
</colgroup>
<thead>
  <tr><th>ヘッダ1</th><th>ヘッダ2</th><th>ヘッダ3</th><th>ヘッダ4</th><th>ヘッダ5</th></tr>
</thead>
<tfoot>
  <tr><td>フッタ1</td><td>フッタ2</td><td>フッタ3</td><td>フッタ4</td><td>フッタ5</td></tr>
</tfoot>
<tbody>
  <tr><td>データ1-1</td><td>データ1-2</td><td>データ1-3</td><td>データ1-4</td><td>データ1-5</td></tr>
  <tr style="visibility:collapse; background:#cf9;"><td>データ2-1</td><td>データ2-2</td><td>データ2-3</td><td>データ2-4</td><td>データ2-5</td></tr>
  <tr><td>データ3-1</td><td>データ3-2</td><td>データ3-3</td><td>データ3-4</td><td>データ3-5</td></tr>
</tbody>
</table><br>

<div style="background:#def;">こんにちは　こんにちは　こんにちは　こんにちは</div>
<div style="visibility:collapse; background:#ff9;">こんにちは　こんにちは　こんにちは　こんにちは</div>  
<div style="background:#cf9;">こんにちは　こんにちは　こんにちは　こんにちは</div>

-ie7は未対応です。また、テーブルに関してo9 sf4 gc2は不完全です。ie8 ff3は対応しています。

表示と非表示を動的に切り替え (ドロップダウンメニュー)

DropDownMenu　

DropDown.css　

DropDown.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>drop down menu</title>

<link rel="stylesheet" href="dd/DropDown.css" type="text/css">

<script src="dd/DropDown.js" type="text/javascript"></script>
</head>

<body>


<div class="dropbox">

<ul id="dd">

<li class="mainmenu"><a href="#" id="mmenu1" onMouseOver="mopen(1)" onMouseOut="mclosetime();">OS</a>
  <ul class="submenu" id="smenu1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();">
  <li><a href="#">Windows XP</a></li>
  <li><a href="#">Windows Vista</a></li>
  <li><a href="#">Mac OS 9</a></li>
  <li><a href="#">Mac OS X</a></li>
  <li><a href="#">Unix</a></li>
  <li><a href="#">Linux</a></li>
  </ul>
</li>

<li class="mainmenu"><a href="#" id="mmenu2" onMouseOver="mopen(2)" onMouseOut="mclosetime();">BROWSER</a>
  <ul class="submenu" id="smenu2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();">
  <li><a href="#">Mozilla</a></li>
  <li><a href="#">Netscape Navigater</a></li>
  <li><a href="#">Internet Explorer</a></li>
  <li><a href="#">Opera</a></li>
  <li><a href="#">Firefox</a></li>
  <li><a href="#">Safari</a></li>
  </ul>
</li>

<li class="mainmenu"><a href="#" id="mmenu3" onMouseOver="mopen(3)" onMouseOut="mclosetime();">FUNCTION</a>
  <ul class="submenu" id="smenu3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();">
  <li><a href="#">C</a></li>
  <li><a href="#">C++</a></li>
  <li><a href="#">Perl</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
  </ul>
</li>

</ul>

<h1>DropDownMenu</h1>
<div class="cmt">これはJavascriptとCSSを組み合わせたもっとも一般的なDropDownMenuのサンプルです。このサンプルに背景画像を組み合わせたり、その背景画像に透過性のある画像を用いたりすることもできます。また、Drop Down Menuがスライドしながら現れるアニメーション化されたJavascriptファイルなども公開されています。<br>
さらに、Javascriptを一切使用しないCSSだけのDrop Down Menuなどもあります。<br>
「ドロップダウン」をキーワードにいろいろと検索してみてください。</div>
</div>


</body>
</html>