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

テーブルタグを使うと様々なWEBデザインが可能になります。 テーブルタグをを使ったデザインテンプレート集を作ってみました。 ご参考下さい。なお、ここで紹介するソースはご自分のサイトで 自由に使って頂いて結構です。

<テンプレート使う時の注意点>
• Width="250"は任意の大きさに変更してください。
• Border="1"をBorder="0"にすると線が消えます。

みんなのタグ辞書
●フォントタグ ●レイアウトタグ ●リンク・画像タグ ●テーブルタグ ●リスト ●ページ ●特殊文字 ●雑学・小技集	・リンク集 ・日記 ・自己紹介
みんなのタグ辞書はリンクフリー

Yahoo!JAPANの骨組みの部分って感じです。 中央のセルを「Valign="top"」で 上寄せにしてあります。 中に更にテーブルを挿入すれば よりYahoo!JAPANっぽくなります。

みんなのタグ辞書
・リンク集 ・日記 ・自己紹介	●フォントタグ ●レイアウトタグ ●リンク・画像タグ ●テーブルタグ ●リスト ●ページ ●特殊文字 ●雑学・小技集	更新
みんなのタグ辞書はリンクフリー

ZDNetの特徴は縦に3列に分割されているところです。 それぞれの列は記事によって長さが違ってますが 単純にすると左のテーブルになります。 「Valign="top"」がポイントです。

●フォントタグ ●レイアウトタグ ●リンク・画像タグ ●テーブルタグ ●リスト ●ページ ●特殊文字 ●雑学・小技集 ・リンク集 ・日記

XREA.COMは角が丸いのが最大の特徴です。 がしかし、画像は大きいのがふたつだけで、そこまで複雑ではありません。 角丸のテーブルの中に更にテーブルがあると考えてください。 中身のテーブルは解り易いように線を表示してますが、 消した方がいいでしょう。

角丸テーブルはコチラ

みんなのタグ辞書

●フォント ●レイアウト ●リンク ●テーブル ●リスト ●ページ ●特殊文字 ●小技集	メニュー
	お知らせ あいうえお
	更新履歴
	1/1/完成 1/2/更新
	サイト1	サイト2

某サイトの複雑テーブルを単純化してみました。 こういうテーブルはなかなか人気が高く、 よく見かけます。ポイントは ひとつひとつのセルの幅に注意をする事です。 簡単なのはWidth="数字"ではなく パーセント%で指定するとセル幅の計算が楽になります。

メニュー｜フォント｜レイアウト｜リンク
ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 メニュー２ ここに文字 ここに文字 ここに文字 ここに文字 ここに文字	ここに文字 ここに文字 ここに文字 ここに文字 ここに文字 メニュー：なんとかかんとか メニュー2：なんとかかんとか メニュー2：なんとかかんとか
メニュー3：なんとかかんとか メニュー4：なんとかかんとか

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