site title

　リンキング スタイルシートの内容

テーブルデザインの留意点

• メニューセルを可変するときは、この部分のセルの縦連結数も同時に可変させる。
  • 例：左のメニューセル数５→６に変更の場合
    >>　この部分のセル連結数→５から６連結に変更
  • ダミーセルの高さは、メインコンテンツのテキスト行に合わせ変更は任意。
    （但しダミーセルの高さが不足すると、メニューセルの高さが伸張）

HTMLソース表示

<table summary="テーブルレイアウト外枠">
<tr>
<td>
<table width="760" id="head_foot_frame" cellpadding="2" cellspacing="6" summary="ヘッダ">
<tr>
<td><h1 id="h1_deco">site title</h1></td>
<td colspan="2" id="h1tonari">
template by Hybrid Design NAVI 2005</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="2" cellspacing="7" summary="メニュー">
<tr>
<td id="left_menu_top">左メニュー項目トップ作例：HOME</td>
<td rowspan="6" valign="top">
<div id="main_yohaku">
<h2>テーブルデザイン総括</h2>
<br /> <h3>拙作テーブルテンプレート</h3>
<div id="text">
<a href="URL">
リンキング スタイルシートの内容
</a>
<div><br /></div>
<h3>テーブルデザインの留意点</h3>
<ul>
<li>メニューセルを可変するときは、この部分のセルの縦連結数も同時に可変させる。
<ul>
<li>例：左のメニューセル数５→６に変更の場合<br />
　>>　この部分のセル連結数→５から６連結に変更</li>
<li>ダミーセルの高さは、メインコンテンツのテキスト行に合わせ変更は任意。</li>
</ul>
</li>
</ul>
<div><br /></div>
<h4>HTMLソース表示</h4>

</div>
</div>
</td>
<td class="right_menu">リンク</td></tr>
<tr>
<td class="left_menu">ハイブリッドデザイン</td>
<td class="right_menu">掲示板</td>
</tr>
<tr>
<td class="left_menu">CSSデザイン</td>
<td class="right_menu">お問い合わせ</td>
</tr>
<tr>
<td class="left_menu">xhtml1.0</td>
</tr>
<tr>
<td class="left_menu">xhtml1.1</td>
</tr>
<tr>
<td id="dummycell">　（ダミーセルの破線は非表示にする）
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="760" class="head_foot_frame" cellpadding="2" cellspacing="6" summary="フッタ">
<tr>
<td>
<div class="end_foot">
Copyright © Hybrid design NAVI 2005 all right reserved,</div>
</td>
</tr>
</table>
</td>
</tr>
</table>