テーブルデザインをパーツ別に検証 ４ 【中央コンテンツ部】の設定
- テーブルデザイン骨格イメージ
-
ヘッダ （HPタイトルなど） メニュー メインコンテンツ サブメニュー メニュー サブメニュー メニュー サブメニュー メニュー ダミーセル フッタ （著作権表示など） - 【中央コンテンツ部】の設定
- １．左右メニューと中央部分をそれぞれ下記のように想定
-
左 >> MENU、テーブルデザイン、CSSデザイン、xhtml1.0、xhtml1.1
中央 >> コンテンツ本文
右 >> リンク、 掲示板、 お問い合わせ
- ２．左メニュー、中央コンテンツおよび右メニューを<table>タグで囲む
- 左メニューにダミーセルを書き加え、中央コンテンツのテキスト行が可変したときダミーセルのheight値を調整して連動させる。
-
MENU 中央コンテンツ リンク ハイブリッドデザイン 掲示板 CSSデザイン お問い合わせ xhtml1.0 xhtml1.1 ダミーセル - ３．中央コンテンツをスタイルシートに置き換え
-
MENU 中央コンテンツ リンク ハイブリッドデザイン 掲示板 CSSデザイン お問い合わせ xhtml1.0 xhtml1.1 ダミーセル - ４．セルとセル内コンテンツ（テキスト）間の空間領域調整
-
MENU 中央コンテンツ リンク ハイブリッドデザイン 掲示板 CSSデザイン お問い合わせ xhtml1.0 xhtml1.1 ダミーセル - ５．背景色を指定して完成
-
MENU 中央コンテンツ リンク ハイブリッドデザイン 掲示板 CSSデザイン お問い合わせ xhtml1.0 xhtml1.1 ダミーセル - 【中央コンテンツ部】スタイルシート設定内容
- テキスト周りの空間領域、セルの枠線、セルの背景色
-
#center_yohaku2 {
padding:4px 10px;
border-style:solid;border-width: 1px;border-color : #B6CADE ;
background-color:#F3F3F3;
} - 【中央コンテンツ部】ソース表示 赤文字表記
-
<table border="1" cellpadding="1" cellspacing="4"
summary="中央コンテンツをテーブルレイアウト">
<tr>
<td>MENU</td>
<td rowspan="6" id="center_yohaku2" valign="top">
中央コンテンツ</td>
<td>リンク</td>
</tr>
-
<tr>
<td>ハイブリッドデザイン</td><td>掲示板</td>
</tr>
<tr>
<td>CSSデザイン</td><td>お問い合わせ</td>
</tr>
<tr>
<td>xhtml1.0</td>
</tr>
<tr>
<td>xhtml1.1</td>
</tr>
<tr>
<td> <strong>ダミーセル</strong></td>
</tr>
</table>