テーブルデザインをパーツ別に検証 ５ 【フッタ部】の設定
- テーブルデザイン骨格イメージ
-
ヘッダ （HPタイトルなど） メニュー メインコンテンツ サブメニュー メニュー サブメニュー メニュー サブメニュー メニュー ダミーセル フッタ （著作権表示など） - 【フッタ部】の設定
- １．著作権等の表示
>> 例：Copyright © Hybrid design NAVI 2005 all right reserved, - ２．著作権等の表示を<table>タグで囲む
-
Copyright © Hybrid design NAVI 2005 all right reserved, - ３．テーブル幅（左右長）の設定
-
Copyright © Hybrid design NAVI 2005 all right reserved, - ４．テーブルのborderをスタイルシートに置き換え
-
Copyright © Hybrid design NAVI 2005 all right reserved,
- ５．著作権表示（テキスト）をセンタリング、セルとテキスト間の余白調整
-
Copyright © Hybrid design NAVI 2005 all right reserved,
- ６．テーブルに背景色を指定して完成
-
Copyright © Hybrid design NAVI 2005 all right reserved,
- 【フッタ部】スタイルシート設定内容
- テーブルの枠線および背景色
- .headerwaku_back {
border-style:solid;border-width: 1px;border-color : #B6CADE ;
background-color:#F3F3F3; } - 著作権のフォントサイズとセンター寄せおよびセルとテキスト間の余白
- .end_foot {
height:20px;
font-family:Verdana, suns serif;
font-size: 80%;
text-align:center;
color: #245386;
padding:4px 10px;
} - 【フッタ部】ソース表示
-
<table class="headerwaku_back" width="450"
summary="フッタサンプル">
<tr>
<td>
<div class="end_foot">
Copyright © Hybrid design NAVI 2005 all right reserved,
</div>
</td>
</tr>
</table>
<< HOME | next TABLEデザイン完成テンプレート >>