脱！テーブルタグ >> 大枠をテーブルデザイン＋細部をCSSデザイン、それが "
ハイブリッドデザイン" です。
<table>タグの場合 >> インラインスタイルシートを外部ファイル化
- <table>タグのデザイン ２
- <table>タグのデザイン１で<td>タグ（セル）に記述したstyle属性を外部スタイルシートに移行
-
- 作例における外部スタイルシートの内容
- tableとtdタグ全体にスタイルシートでフォントサイズを指定
>> table td { font-size:95%; }
- ヘッダのスタイルシート
>> .headtitle { color: #333333; background-color:#F5F5F5; font-size: 100%; font-weight:bold; }
- フッタのスタイルシート
>> .footline { color: #333333; background-color:#F5F5F5; font-size: 80%; letter-spacing:1px; }
- 左メニューのスタイルシート
>> .left_menu { color:#FFFFFF; background-color:#245386; }
- 右サブメニューのスタイルシート
>> .right_menu { color: #333333; background-color:#FFCCCC; }
- 上記<table>タグのソース表示
- （外部スタイルシートによりソースは大幅に軽量化）
-
<table border="3" cellpadding="5" cellspacing="10" summary="テーブルサンプル">
<tr><td colspan="3" class="headtitle">ヘッダ （HPタイトルなど）</td></tr>
<tr><td class="left_menu">メニュー</td>
<td rowspan="4">メインコンテンツ</td>
<td class="right_menu">サブメニュー</td></tr>
<tr><td class="left_menu">メニュー</td>
<td class="right_menu">サブメニュー</td></tr>
<tr><td class="left_menu">メニュー</td>
<td class="right_menu">サブメニュー</td></tr>
<tr><td class="left_menu">メニュー</td>
<td class="right_menu">サブメニュー</td></tr>
<tr><td colspan="3" class="footline">フッタ （著作権表示など）</td></tr>
</table>
- 仕上がりイメージ <table border="0">
-
| ハイブリッドデザインNAVI |
ハイブリッドデザインの考察
<table>タグのデザイン例
<td>タグのstyle属性を
外部CSSに移行 |
|
|
|
|
|
- HTML定義におけるデザイン（見栄えや文字装飾などのレイアウト）はスタイルシートの設定を推奨しています。
テーブルデザインはお奨めできません。
- また、実際にテーブルでデザインしようとするとかなり複雑で根気を必要とします。
あくまでも参考事例ですが、パーツ別に作例したテーブルサンプルの詳細は下記の通りです。
- >> ヘッダ部のテーブル設定 （サイトタイトルやタイトルのフォント変更）
>> 左メニューのセル設定 （＋ダミーセル）
>> 右メニューのセル設定
>> 中央コンテンツのセル設定 （テキスト周りの空間領域）
>> フッタ部のテーブル設定 （著作権表示等）
>> 拙作テーブルデザインテンプレート