ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ CSSテーブル ]

最もオーソドックスなテーブルをCSSで組む

▼ table-1

[ ZYCO'S テンプレートの機能と内容について ]
機能項目 内容
ウェブポジショニング 上記全てのアイテムはSEO対策の構造を成す
HTML 4.01 strict(全てのブラウザで表示の誤差を最小限に留める)
CSS 全てのデザインとレイアウトを制御
JavaScript 機能と演出
Font font-size free
デザインとレイアウト ベイシックレイアウト(左右に写真を配置)
左右写真配置(説明付き)
商品掲載リストの見せ方(拡大写真)
バナー用レイアウト(トップページ向き)
一覧表(ベイシック、ロールオーバー)
タイトル(大見出し、小見出し)
パンくずリンク(サイトの現在位置を示す)
サイドメニュー(ロールオーバー・リストメニュー)
リストスタイル(箇条書きで簡潔に説明)

▼ html source

Select All

 CSSで組まれたテーブルはCSSを外すと通常の本文と同じように表示されますのでSEOに有効です。このテーブルはサマリー、キャプション、ヘッド、フット、ボディの5つの要素で構成されます。

  • <summary>
    テーブルの内容と構成を説明します。html sourceを参考に記入してください。
  • <caption>
    テーブルのタイトルとして表の上部に表示されるものです。
  • <thead>
    テンプレートのイエロー部分の項目名をここで指定します。
  • <tfoot>
    テンプレートのブルー部分の項目名をここで指定します。
  • <thead>
    ここに表のデータを入力します。
  • <td rowspan="9">
    セルの結合を指定します。テンプレートでは9つのセルが結合されています。
  • ロールオーバー効果
    <td onmouseover="this.className='blue'" onmouseout="this.className=''">で設定しています。効果を削除したい場合はこれを<td>に変更します。