テーブルを作って、セルの中にリンクしているサイトさんのバナーを貼ろうと思っています。
実際に貼ると、リンクバナーの上が空いてしまいます。
いろいろ試したのですが、ここ2週間くらいでhtmlを勉強し出した初心者のため、
何が悪いのか分かりません。
詳しい方がいらっしゃいましたら、見ていただけますか。
××には画像のファイル名、※※にはサイトURLを入れています。
<table border align="center">
<caption align="top"><b>≪○×△≫</b></caption>
<tr>
<td width="140"> サイトバナー</td>
<td width="130"> 管理人様/td>
<td><width="400"> サイト傾向等</td>
</tr>
<tr><td width="100"><A HREF="http://※※" target="_blank">
<IMG src="××.gif" border="0"></A></td>
<td width="130"> ○○様</td>
<td width="400">サイト紹介文</td>
</tr>
</table>
valign="top"も試しましたが、ダメでした。
バナーの画像がgifでもjpgでも同じです。
何が原因でしょうか。
No.2ベストアンサー
- 回答日時:
altとborderは問題の部分とはまったく関係してない事ですが
書き方がおかしいのと、必須項目だったので、足したまでです。
<caption align="top"><b>≪○×△≫</b></caption>
を外してみる事と
紹介文章が長過ぎないでワイド400の間に収まる事。
あとは<td Valign="top">しかないですよね。
極端な話
<td width="140" Valign="top" height="200"><A HREF="http://※※" target="_blank"><IMG src="××.gif" border="0"></A></td>
っとすれば
ちゃんと一番上に画像が出ますよね?
それかcssでimgにborderが着くように設定していませんか?
>極端な話
><td width="140" Valign="top" height="200">
><A HREF="http://※※" target="_blank">
><IMG src="××.gif" border="0"></A></td>
>っとすれば
>ちゃんと一番上に画像が出ますよね?
このようにすれば確かに一番上に画像が出ました。
こちらを参考にさせていただき、いろいろ試してみたら、
バナー以外のセルのwidthを指定しなければ、
画像がきちんとワクに入ることが分かりました。
何故こうなってしまうののかよく分からないのですが
これで解決いたしました。
いろいろ勉強になりました。
ありがとうございました!
No.1
- 回答日時:
<table border="1" align="center">
<caption align="top"><b>≪○×△≫</b></caption>
<tr>
<td width="140"> サイトバナー</td>
<td width="130"> 管理人様/td>
<td><width="400"> サイト傾向等</td>
</tr>
<tr>
<td width="140" height="??"><A HREF="http://※※" target="_blank"><IMG src="××.gif" border="0" alt=""></A></td>
<td width="130"> ○○様</td>
<td width="400">サイト紹介文</td>
</tr>
</table>
上があくの意味がちょっとわからないのだけど
バナーの高さを、追加してしてみては?
あと、上のセルが140なので、下も140にしたのと
画像にはalt必須なのと
一番上のborder="" を指定しました。
回答ありがとうございました。
セルの数字が上と下で違っていたのは、間違いです(^_^;)
セルの高さ指定は前に試みましたが、結果は同じでした。
教えていただきました「alt」と
「一番上のborder="" 」やってみましたが、同じでした。
「上が空く」と言うのは、
バナーとセルの枠の間が空いてしまうのです。
セルにぴったりとバナーが入るようにしたいのですが・・・。
いろいろ考えていただき、ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
文字列が入っているtdを削除せ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
tableにul,または,olを入れられ...
-
表の1列だけをCSSを使って右揃...
-
テーブル入れ子した時の、テー...
-
EXCELからhtmlへの変換で罫線が...
-
画像のロールオーバーがずれて...
-
tableでcolspanを使うと次行以...
-
サイト作成中・・・表の両端に...
-
Htmlのtd要素の中で半角の空...
-
テーブルの途中からcellspacing...
-
逆L字の表(table)組み
-
スタイルシートは直接指定より...
-
DreamWeaverのソースコードの整...
-
HTMLのrowspan
-
表の中の列の順番を入れ替える...
-
<table>の<td>の幅が:nth-child...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
TRタグの余白をcssで設定するには
-
文字列が入っているtdを削除せ...
-
テーブルのヘッダとボディの幅...
-
テーブルの行の高さを指定する...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
HTML <td></td>タグ セル内余...
-
ホームページ 表の上の余白を...
-
テーブルの表示がずれます
-
スタイルシートで colspan=3と...
-
テーブルの上に空行が入る・・...
-
テーブルタグのセルの幅の一部...
-
表の1列だけをCSSを使って右揃...
-
逆L字の表(table)組み
-
tableでcolspanを使うと次行以...
-
HTMLのテーブルで桁をそろ...
-
テーブルのセルにアンカー
おすすめ情報