tableタグを使ってタブ作成

2010/6/4 (金)

ゼロカロリーの炭酸飲料にハマっているjyunzyです :kaoemoji5:

今回はホームページ作成で学んだことをお話したいと思います。
下のようなタブを作ろうとしていた時の事です。 :down:

完成イメージ

タブの画像サイズはそれぞれ横幅100px、縦幅26pxになっています。
画像同士をを20pxほど空けて、左寄りに画像を配置する予定でした。

HTMLはこんな感じで記述しました :down:

～　中　略　～

<div>の横幅はスタイルシートで600ｐｘ、<table>はwidth属性で100％表示にしてあります。
そうしたら、下のように画像が均等に並んでしまいました :ase1: :down:

原因は、最後の<td>タグのwidth属性だったようです。

最後の<td>タグのwidth属性を削除した所、完成イメージと同じ表示になりました。
知ってる人から見れば常識だと思いますが、私はここに気がつくまで苦戦してしまいました :naku:

私は本やネットでHTMLの勉強してきたつもりでしたが、今回のようなケースは初めて見ました。
実践じゃないと気がつかない事ってたくさんありますね :kaoemoji3:

記事中にある画像は、こちらのサイトの素材を元に作成しました :kaoemoji2:
Fuel Your Interface　（海外サイト）

ブログランキングに挑戦中です。クリックしてくれるとうれしいです！ :b_body_jump:

:kurikku: 　こっちも　

コメント (0)

お客様のニーズに合わせたホームページの作成から制作後のSEO対策までサポート。Flashの制作やCGIの設置代行、バナーの制作など各種WEBコンテンツからメルマガ、ビジネスブログなどのウェブシステムの構築も安心価格でご提供致します。

ウェブサイトからショッピングサイト、各種WEBコンテンツの制作までお任せください。制作後の保守やSEO対策もしっかりサポートします。

コメントはまだありません。

お手頃価格で、機能充実・検索エンジン上位表示のインターネットショッピングサイトを構築いたします。運営教育もあるので初めての方も安心です。