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

テーブルをCSSで組み機能を付加する

▼ table-4

[ バンテイジポイント都立大の賃貸物件詳細について ]
物件項目 内容と説明
関連物件 バンテイジポイント都立大の別の部屋を見る
物件種目 貸マンション
間取り 1LDK
間取り図
専有面積 85.80u
築年月 2006年 8月20日
建物名称 バンテイジポイント都立大
賃料 20万円
管理費/共益費 なし
所在地 世田谷区深沢2丁目(GoogleMaps)
交通 東急東横線「都立大学」駅 徒歩12分
東急東横線「自由が丘」駅 徒歩15分
「自由が丘」下車 バス東急コーチ「深沢2丁目」5分 徒歩 1分
駐車場
建物構造 RC
階建・階 6階建 3階
間取り内訳 LD10.7 和6 洋8.7 洋5.7 K3.7
設備 オートロック、CATV、冷暖房、宅配ボックス、エレベーター、電気式床暖房、洗濯乾燥機、ウォシュレット

シャワールーム

エントランス

バスルーム

キッチン
礼金 2ヶ月
敷金 2ヶ月
保証金 なし
保証金償却 なし
建物構造 RC
保険 有り 2年 22,000円
現況 空室
入居日 2006年 8月20日以降
契約 2年
条件
特記事項
情報登録日 2006年 8月20日 (日) 00:36:13
保険 有り 2年 22,000円
取引態様 媒介

▼ html source

Select All

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

  • ロールオーバー・ビューワー
    マウスポインターをイメージに重ねると拡大したイメージとテキストを表示します。以下はシャーワールームの場合の記述です。
    <a class="thumbnail" href="#thumb"><img src="img/se01.jpg" width="62px" height="80px"><span><img src="img/se01_b.jpg"><br>シャワールーム</span></a>

    まず、表示するイメージのファイルを指定しそのサイズを記入します。次に拡大イメージのファイルを指定し、イメージの下に表示されるテキストを記入します。
  • <caption>
    テーブルのタイトルとして表の上部に表示されるものです。
  • <thead>
    テンプレートのイエロー部分の項目名をここで指定します。
  • <tfoot>
    テンプレートのブルー部分の項目名をここで指定します。
  • <thead>
    ここに表のデータを入力します。
  • <td rowspan="2">
    セルの結合を指定します。2つのセルが結合されている場合の記述です。
  • ロールオーバー効果
    <td onmouseover="this.className='blue'" onmouseout="this.className=''">で設定しています。効果を削除したい場合はこれを<td>に変更します。
  • GoogleMap
    所在地の項目ではGoogleMapを活用しています。