１７－１．セル幅を指定してもセル幅が広がってレイアウトが崩れてしまう場合の考え方
　 １）以下のようなホームページをテーブルを作ってみたいとする。
17-1

　 ２）実際に以下の手順でホームページを作ってみる。
　　　 実際に以下のプログラムを入力して、作ってみても実際のホームページは、ちゃんと表示しない。
　　　 当然見る側でフォントサイズが変更されてもフォントサイズが変わらないようにスタイルシートでフォントサイズをしてしている。
　　これで、見る側のフォントサイズの変更しても文字サイズによるテーブルの型崩れは起こらないようにしている。
　　　では、どのようにすれば、この型崩れを直すことができるのでしょうか？

絶滅危惧種のデンジソウ。形は四つ葉のクローバーのようで、マメ科の植物とも思えるが、シダの仲間だそうだ。神奈川県内では伊勢原・山北の一部を残して絶滅扱い。もちろん、横浜市内では跡形もない。もう３０年前か・・横浜市内の宅地開発によって放棄された水田で見かけたんだよなぁ。四つ葉のクローバーの大群。今思えばあれはデンジソウだったんだなぁ。それがひょんな事から水生生物のペットショップの店先で再会。譲り受けることになった。どんな経緯で半ば放置された店先の水槽に繁茂したのかは謎だが、今のところ絶滅危惧種とは思えない勢いで繁殖している。ネット通販でも取り扱いはあるようだが、どうも斑入りの模様もないし違いそうだ。しかし、どこの馬の骨かわからない遺伝子群を野に帰すわけには行かないだろう。とりあえず絶やさぬように育てていくつもりだ。
絶滅危惧種のデンジソウ。形は四つ葉のクローバーのようで、マメ科の植物とも思えるが、シダの仲間だそうだ。神奈川県内では伊勢原・山北の一部を残して絶滅扱い。もちろん、横浜市内では跡形もない。もう３０年前か・・横浜市内の宅地開発によって放棄された水田で見かけたんだよなぁ。四つ葉のクローバーの大群。今思えばあれはデンジソウだったんだなぁ。それがひょんな事から水生生物のペットショップの店先で再会。譲り受けることになった。どんな経緯で半ば放置された店先の水槽に繁茂したのかは謎だが、今のところ絶滅危惧種とは思えない勢いで繁殖している。ネット通販でも取り扱いはあるようだが、どうも斑入りの模様もないし違いそうだ。しかし、どこの馬の骨かわからない遺伝子群を野に帰すわけには行かないだろう。とりあえず絶やさぬように育てていくつもりだ。
絶滅危惧種のデンジソウ。形は四つ葉のクローバーのようで、マメ科の植物とも思えるが、シダの仲間だそうだ。神奈川県内では伊勢原・山北の一部を残して絶滅扱い。もちろん、横浜市内では跡形もない。もう３０年前か・・横浜市内の宅地開発によって放棄された水田で見かけたんだよなぁ。四つ葉のクローバーの大群。今思えばあれはデンジソウだったんだなぁ。それがひょんな事から水生生物のペットショップの店先で再会。譲り受けることになった。どんな経緯で半ば放置された店先の水槽に繁茂したのかは謎だが、今のところ絶滅危惧種とは思えない勢いで繁殖している。ネット通販でも取り扱いはあるようだが、どうも斑入りの模様もないし違いそうだ。しかし、どこの馬の骨かわからない遺伝子群を野に帰すわけには行かないだろう。とりあえず絶やさぬように育てていくつもりだ。

イメージは、イメージ自体を右クリックしてダウンロードしてください。
Ｆｌａｓｈコンテンツのダウンロードは、ここを右クリックして行ってください。

<html>
<head>
<title>１７．テーブルとスタイルシートを使ってホームページを作ってみる。</title>
<style type="text/css">
<!--
　.font1{font-size:10px}
-->
</style>
</head>
<body>
<div>１７．テーブルとスタイルシートを使ってホームページを作ってみる。</div>
<table width="690" border="0" cellpadding="0" cellspacing="0">
　 <tr>
　　 <td><img src="images/logo.gif" width="130" height="130"></td>
　　 <td colspan="3">
　　　 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="560" height="130">
　　　　 <param name="movie" value="images/logo.swf">
　　　　 <param name="quality" value="high">
　　　　 <embed src="images/logo.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="560" height="130"></embed>
　　　 </object>
　　 </td>
　 </tr>
　 <tr>
　　 <td colspan="2"><img src="images/image1.jpg" width="180" height="135"></td>
　　 <td width="330" valign="top" bgcolor="#FFFFCC" class="font1">絶滅危惧種のデンジソウ。形は四つ葉のクローバーのようで、マメ科の植物とも思えるが、シダの仲間だそうだ。神奈川県内では伊勢原・山北の一部を残して絶滅扱い。もちろん、横浜市内では跡形もない。もう３０年前か・・横浜市内の宅地開発によって放棄された水田で見かけたんだよなぁ。四つ葉のクローバーの大群。今思えばあれはデンジソウだったんだなぁ。それがひょんな事から水生生物のペットショップの店先で再会。譲り受けることになった。どんな経緯で半ば放置された店先の水槽に繁茂したのかは謎だが、今のところ絶滅危惧種とは思えない勢いで繁殖している。ネット通販でも取り扱いはあるようだが、どうも斑入りの模様もないし違いそうだ。しかし、どこの馬の骨かわからない遺伝子群を野に帰すわけには行かないだろう。とりあえず絶やさぬように育てていくつもりだ。</td>
　　 <td><img src="images/image1.jpg" width="180" height="135"></td>
　 </tr>
　 <tr>
　　 <td colspan="2"><img src="images/image2.jpg" width="180" height="135"></td>
　　 <td width="330"valign="top" bgcolor="#FFCCCC" class="font1">絶滅危惧種のデンジソウ。形は四つ葉のクローバーのようで、マメ科の植物とも思えるが、シダの仲間だそうだ。神奈川県内では伊勢原・山北の一部を残して絶滅扱い。もちろん、横浜市内では跡形もない。もう３０年前か・・横浜市内の宅地開発によって放棄された水田で見かけたんだよなぁ。四つ葉のクローバーの大群。今思えばあれはデンジソウだったんだなぁ。それがひょんな事から水生生物のペットショップの店先で再会。譲り受けることになった。どんな経緯で半ば放置された店先の水槽に繁茂したのかは謎だが、今のところ絶滅危惧種とは思えない勢いで繁殖している。ネット通販でも取り扱いはあるようだが、どうも斑入りの模様もないし違いそうだ。しかし、どこの馬の骨かわからない遺伝子群を野に帰すわけには行かないだろう。とりあえず絶やさぬように育てていくつもりだ。</td>
　　 <td><img src="images/image2.jpg" width="180" height="135"></td>
　 </tr>
　 <tr>
　　 <td colspan="2"><img src="images/image3.jpg" width="180" height="135"></td>
　　 <td width="330" valign="top" bgcolor="#CCFFFF" class="font1">絶滅危惧種のデンジソウ。形は四つ葉のクローバーのようで、マメ科の植物とも思えるが、シダの仲間だそうだ。神奈川県内では伊勢原・山北の一部を残して絶滅扱い。もちろん、横浜市内では跡形もない。もう３０年前か・・横浜市内の宅地開発によって放棄された水田で見かけたんだよなぁ。四つ葉のクローバーの大群。今思えばあれはデンジソウだったんだなぁ。それがひょんな事から水生生物のペットショップの店先で再会。譲り受けることになった。どんな経緯で半ば放置された店先の水槽に繁茂したのかは謎だが、今のところ絶滅危惧種とは思えない勢いで繁殖している。ネット通販でも取り扱いはあるようだが、どうも斑入りの模様もないし違いそうだ。しかし、どこの馬の骨かわからない遺伝子群を野に帰すわけには行かないだろう。とりあえず絶やさぬように育てていくつもりだ。</td>
　　 <td><img src="images/image3.jpg" width="180" height="135"></td>
　 </tr>
</table>
</body>
</html>

　３）考えかた（ヒント）
　　①このテーブルは以下のような構造になっています。

　　　・４行×４列のテーブルで実線がテーブルとセルで、破線は、左右セルを連結した状態です。
　　　・Ａ：６９０ピクセル　Ｂ：５１０ピクセル　Ｃ：１３０ピクセル　Ｄ：５０ピクセル　　Ｅ：３３０ピクセル
　　　　Ｆ：１８０ピクセル　Ｇ：１８０ピクセル　Ｈ：５３５ピクセル　Ｉ　：１３０ピクセル　Ｊ：１３５ピクセル
　　　　Ｋ：１３５ピクセル　Ｌ：１３５ピクセル

　　②なぜこのような現象が起こるのでしょうか？
　　　　これは、セル、テーブルの幅をｗｉｄｔｈプロパティで固定していないところがあるためです。
　　　イメージ１からイメージ８までとテキスト１からテキスト３は、幅をｗｉｄｔｈプロパティで固定していますが、セル幅（Ｄ）は、固定していません。
　　　これが、レイアウトの型崩れの原因になっています。
　　　　しかし、上図の点線で示すように幅（Ｄ）で表わされるセルは、すべて隣のセルと連結されているため、ｗｉｄｔｈプロパティを設定する
　　　ところがありません。

　　③テーブルにダミーの行（セル）を追加してセル幅（Ｄ）を固定させる。

イメージ１
イメージ２
イメージ３ テキスト１ イメージ４
イメージ５ テキスト２ イメージ６
イメージ７ テキスト３ イメージ８
       
追加したダミーの行、赤の部分のセルを固定してやることで型崩れがなくなります。

　　このダミー部分のプログラムを書くと以下のようになります。
　　 <tr>
　　　 <td height="17" bgcolor="#66FF00">&nbsp;</td>　この行はダミーなので不可視状態にするため実際には、ｈｅｉｇｈｔ="0"に設定します。
　　　 <td width="50" bgcolor="#FF0000">&nbsp;</td>　上図の赤の部分でセル幅（D）を５０ピクセルにしています。
　　　 <td bgcolor="#66FF00">&nbsp;</td>
　　　 <td bgcolor="#66FF00">&nbsp;</td>
　　 </tr>

　　テーブルの最後の行にダミー行を追加して型崩れが発生しないようにセル幅（Ｄ）を固定したレイアウトはこのようになります。