フォント レイアウト リンク・画像 テーブル リスト ページ 特殊文字 小技・雑学
カラーコード お薦めサイト ホーム HP作成ソフト HP作成法

トップページ > テーブルタグ > テーブルタグテンプレート

テーブルタグデザインテンプレートについて
テーブルタグを使うと様々なWEBデザインが可能になります。 テーブルタグをを使ったデザインテンプレート集を作ってみました。 ご参考下さい。なお、ここで紹介するソースはご自分のサイトで 自由に使って頂いて結構です。
    <テンプレート使う時の注意点>
  • Width="250"は任意の大きさに変更してください。
  • Border="1"Border="0"にすると線が消えます。


Yahoo!JAPAN型 [ソースを見る]
みんなのタグ辞書
●フォントタグ
●レイアウトタグ
●リンク・画像タグ
●テーブルタグ
●リスト
●ページ
●特殊文字
●雑学・小技集
・リンク集
・日記
・自己紹介
みんなのタグ辞書はリンクフリー
Yahoo!JAPANの骨組みの部分って感じです。 中央のセルを「Valign="top"」で 上寄せにしてあります。 中に更にテーブルを挿入すれば よりYahoo!JAPANっぽくなります。


ZDNet型 [ソースを見る]
みんなのタグ辞書
・リンク集
・日記
・自己紹介
●フォントタグ
●レイアウトタグ
●リンク・画像タグ
●テーブルタグ
●リスト
●ページ
●特殊文字
●雑学・小技集
更新
みんなのタグ辞書はリンクフリー
ZDNetの特徴は縦に3列に分割されているところです。 それぞれの列は記事によって長さが違ってますが 単純にすると左のテーブルになります。 「Valign="top"」がポイントです。


XREA.COM型 [ソースを見る]
●フォントタグ
●レイアウトタグ
●リンク・画像タグ
●テーブルタグ
●リスト
●ページ
●特殊文字
●雑学・小技集
・リンク集
・日記
XREA.COMは角が丸いのが最大の特徴です。 がしかし、画像は大きいのがふたつだけで、そこまで複雑ではありません。 角丸のテーブルの中に更にテーブルがあると考えてください。 中身のテーブルは解り易いように線を表示してますが、 消した方がいいでしょう。

角丸テーブルはコチラ


複雑テーブル [ソースを見る]
みんなのタグ辞書

●フォント
●レイアウト
●リンク
●テーブル
●リスト
●ページ
●特殊文字
●小技集
メニュー
お知らせ
あいうえお
更新履歴
1/1/完成
1/2/更新
サイト1 サイト2
某サイトの複雑テーブルを単純化してみました。 こういうテーブルはなかなか人気が高く、 よく見かけます。ポイントは ひとつひとつのセルの幅に注意をする事です。 簡単なのはWidth="数字"ではなく パーセント%で指定するとセル幅の計算が楽になります。


@Nifty型 [ソースを見る]

メニューフォントレイアウトリンク

ここに文字
ここに文字
ここに文字
ここに文字
ここに文字
メニュー2
ここに文字
ここに文字
ここに文字
ここに文字
ここに文字

ここに文字
ここに文字
ここに文字
ここに文字
ここに文字


メニュー:なんとかかんとか
メニュー2:なんとかかんとか
メニュー2:なんとかかんとか

メニュー3:なんとかかんとか
メニュー4:なんとかかんとか
Niftyのテーブルはとても複雑で、 再現したものはあくまでも私のアレンジした 「なんちゃって」ですので、ご了承下さい。 まず、ナナメのタイトル部分は画像です。 それ以外は全てテーブルで作成しました。 線に見える部分はHeight="1"で表現します。 立体的になっているのも全てテーブルです。 本当は最下部分もテーブルだったのですが、 Hrタグで表現しました。 これをお使いになる場合は テーブルソースの一番上の250を 任意の大きさにすればOKです。 他の部分もそれに合わせて大きくなります。



トップページタグ実験場リンクについて免責事項メール
Copyright © 2001-2006 YukiProduction. All Rights Reserved.
全ページリンクフリー
since03/06/01