脱！テーブルタグ >> 大枠をテーブルデザイン＋細部をCSSデザイン、それが "ハイブリッドデザイン" です。

<table>タグの場合

<table>タグのデザイン １
表組み　（骨組み）
ヘッダ （HPタイトルなど）
メニューメインコンテンツサブメニュー
メニューサブメニュー
メニューサブメニュー
メニューサブメニュー
フッタ （著作権表示など）

"セル"の装飾　（CSSの埋め込み）
ヘッダ （HPタイトルなど）
メニューメインコンテンツサブメニュー
メニューサブメニュー
メニューサブメニュー
メニューサブメニュー
フッタ （著作権表示など）

ヘッダとフッタに記述したインラインスタイルシート
<td colspan="3" style="background-color:#F5F5F5;">ヘッダ （フッタ）</td>
左メニューに記述したインラインスタイルシート
<td style="background-color:#245386;color:#FFFFFF;">メニュー</td>
右メニューに記述したインラインスタイルシート
<td style="background-color:#FFCCCC;">サブメニュー</td>
上記"セル"を装飾した<table>タグのソース表示
<table border="3" cellpadding="5" cellspacing="10" summary="テーブルサンプル">
<tr><td colspan="3" style="background-color:#F5F5F5;">ヘッダ （HPタイトルなど）</td></tr>
<tr><td style="background-color:#245386;color:#FFFFFF;">メニュー</td>
<td rowspan="4">メインコンテンツ</td>
<td style="background-color:#FFCCCC;">サブメニュー</td></tr>
<tr><td style="background-color:#245386;color:#FFFFFF;">メニュー</td>
<td style="background-color:#FFCCCC;">サブメニュー</td></tr>
<tr><td style="background-color:#245386;color:#FFFFFF;">メニュー</td>
<td style="background-color:#FFCCCC;">サブメニュー</td></tr>
<tr><td style="background-color:#245386;color:#FFFFFF;">メニュー</td>
<td style="background-color:#FFCCCC;">サブメニュー</td></tr>
<tr><td colspan="3" style="background-color:#F5F5F5;">フッタ （著作権表示など）</td></tr>
</table>
仕上がりイメージ　<table border="0">
ハイブリッドデザインNAVI
ハイブリッドハイブリッドデザインの考察
　
<table>タグのデザイン例		リンク
CSSデザイン掲示板
XHTML1.0お問い合わせ
XHTML1.1日記
© 2005 Hybrid design NAVI all right reserved
▲Top
<<　HOME　|　next　>>