jyamatoです。

HTMLで、テーブルのカラムにまたがって画像を貼る方法を教えてください。
テーブルの境界線の上に、画像を張りたいのですが・・・

そもそも、こんな事は出来ないような気がするのですが・・・如何でしょう。

出来ない場合は、何か良い方法
(あたかも、テーブルの境界線の上に画像が貼れているように見えてしまうように)
があれば教えてください。
宜しくおねがいします。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

あたかも、テーブルの境界線の上に画像が貼れているように見えてしまうように




境界線の上に画像がくれば当然、境界線なんて見えないでしょう?

逆のパターンですと
テーブルを一つ作って、そのテーブルの背景に画像を使用します。さらにその中にテーブルを入れれば完成です

この場合は画像の上に境界線ってことになりますね
    • good
    • 0
この回答へのお礼

ご解答ありがとうございます。

なるほど、かなり複雑なテーブル構成になってしまいますね(・_・;)
教えて頂いた方法で少し試してみます。

しかし、もう少し良い方法があればありがたいのですが・・・
やはり、kosaさんに答えて頂いた方法が精一杯(最善)でしょうかね。

お礼日時:2002/03/06 14:05

うーん、いまいち質問の意味を汲めていなくて、


外してるかもしれませんが…

・テーブル自体の画像を作って下に敷く
・Flashのようなソフトで下のレベルにテーブルのhtmlを、
 上のレベルに画像を読み込み、アルファで透明度をつける
(やってないので可能かはあやしいです)
・テーブルの記述をわざとおかしくして、くずす
(あ、でもやめといたほうがいいですよね…)

無責任な回答でごめんなさい。
    • good
    • 0
この回答へのお礼

ご解答ありがとうございます。
複雑なテーブル構成をが必要になってくるんですね。
やはり、簡単にはいかないようですね。

お礼日時:2002/03/07 09:13

質問に対する回答ですが、問題はブラウザの互換性に関わってきます。



NNだと、<LAYER>タグで座標を指定してやれば、自由自在に画像が張れます。

IEだと、どうかなぁ。<LAYER>って使えなかった気がしますね。

だけど、<img>タグでもマージン指定とかで何とかなりませんかねぇ。
    • good
    • 0
この回答へのお礼

ご解答ありがとうございます。
そうですね<LAYER>はIE未対応ですね。
<IMG>タグのマージン指定で出来るのですか?
試そうと調べてみましたが、分かりませんでした。
どこかのサイトに載っているでしょうか?
教えて頂ければ助かります(__)

お礼日時:2002/03/06 15:00

順当な手段はNo.2の方が言われるようにするのが良いですね。


<table border=0><tr>
<td background="○○.gif">
<table border=1>
<tr><td>。。。。。</td></tr>
<tr><td>。。。。。</td></tr>
</table>
</td>
</tr></table>
で完成です。
    • good
    • 0
この回答へのお礼

やはりそうですか。。。
ご解答ありがとうございます。

お礼日時:2002/03/06 14:50

<TD colspan=7> のように colspan=x で x 個のセルを横方向に連結できますが、これだとダメです

かねぇ??
    • good
    • 0
この回答へのお礼

解答ありがとうございます。
ん~それも、考えたんですけど・・・
その画像と言うのは、●←の様な形でして、背景が透明になっています。
画像の背景が透明なので、テーブルの境界線の上に置くと、●画像の後ろに
境界線が見えるのです・・・の様な感じにしたいのですが。

質問の内容が不十分ですみませんでした(__)

お礼日時:2002/03/06 14:00

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qhtml初心者です。画像サイズについて。 テーブルの中に、文字と、画像リンクを貼っているのですが画像

html初心者です。画像サイズについて。
テーブルの中に、文字と、画像リンクを貼っているのですが画像と文字がズレます!泣
画像というより、文字が下にずれます。

文字<a href=”リンク先”><IMG src=”画像URL” width=”30” height=”40” border=”0”>

3×3のテーブルの中に、上記のコードが9つあります。画像アイコンは2種類で、もう一つは
width=”25” height=”20” border=”0”>です。
アイコンの横と幅が二つそれぞれ違うのでズレてるようです。しかし双方を同じくらいのサイズにしようとするとこうなります。ちなみにフリー素材を拾ってきました。
同じサイズにするにはどうすれば…
ペイントでピクセル値をいじっても、元のサイズが双方違うから結局一緒ですよね?
元が同じサイズの画像をとるしかないでしょうか?

Aベストアンサー

単純にスタイルシートで指定すればよい
img[src=”画像URL”]{height:80px;width:auto;}
位置は、position:relative:top:5px;とかで好きに変えればよい。

そもそも、tableを使って配置するのは問題ですが、それはおいておいて・・

alignなんて16年前から非推奨の代表ですから、そんなもの使わない。

Qテーブル全体の枠線の色を変えたが、 スクロールである程度下に移動したら、 上の枠線と画像の間にかすか

テーブル全体の枠線の色を変えたが、
スクロールである程度下に移動したら、
上の枠線と画像の間にかすかな隙間ができます。上に移動したら、隙間がなくなります。どうしたら良いでしょうか…

一部省略します。

<STYLE type=”text/css”>
<!--
sen{border-style:solid:
border-width:2pt:
border-color:#ffcccc:}
-->
</style>

<table class=”sen” background=”○○” width=”100%”
height=”20” style=border-collapse:collapse:>
<tr>
<td colspan=”2”>
<nobr>
タイトル文字
</nobr>
</td>
</tr>

<tr bgcolor=”○○” bordercolor=”○○”>
<td width=”400” nowrap><nobr>
文字
<a href=”○○”>
<IMG src=”○○”></a>
</nobr>
</td>


<td nowrap><nobr>
文字
<a href=”○○”>
<IMG src=”○○”></a>
</nobr>
</td>

とあります。


ーーーーーーーーーーーーーー
|タイトル文字(背景色は画像URLはりつけ) |文字 文字
|文字 文字
|
|
ーーーーーーーーーーーーーー
★右側も線あり。囲んでます。

メモ帳にコピって、自分のデスクトップに貼り付けて表示するぶんには問題ないのですが、
いざサーバーにもってきて表示した際に
スクロールしたら、
タイトル文字の背景色と、その上の枠線の間に0.5ミリくらいの隙間がでて困っています。
方法ありますでしょうか?
★まだ習い始めたばかりなのと、元々別人が作成したものを修正しているのですが、そもそもが違っているというようなことはまだ私の頭では理解できないので、
隙間をなくす方法だけご教示いただけたら嬉しいです!(u_u)

テーブル全体の枠線の色を変えたが、
スクロールである程度下に移動したら、
上の枠線と画像の間にかすかな隙間ができます。上に移動したら、隙間がなくなります。どうしたら良いでしょうか…

一部省略します。

<STYLE type=”text/css”>
<!--
sen{border-style:solid:
border-width:2pt:
border-color:#ffcccc:}
-->
</style>

<table class=”sen” background=”○○” width=”100%”
height=”20” style=border-collapse:collapse:>
<tr>
<td colspan=”2”>
<nobr>
タイトル文字
</nobr>
</td>
<...続きを読む

Aベストアンサー

まず原因を確認する。
firefoxをとってきて、firebugを追加して、隙間ができる要素を選択して、それにかかわるスタイルシートなりを確認する。marginとpaddingが区別できるはず。
 そのうえで関わるスタイルを変更してみる。

 どのスタイルシートのどの部分かがわかる。

Q画像を固定して貼りたいとおもい、下記のように記述しました。

画像を固定して貼りたいとおもい、下記のように記述しました。

これをリンクにすることは可能でしょうか?

また、画像を横にもう一つ増やせるのでしょうか?

教えてください。

宜しくお願いします。

Aベストアンサー

とりあえずタグを補足してください。

Q画像を固定して貼りたいとおもい、下記のように記述しました。

画像を固定して貼りたいとおもい、下記のように記述しました。


<STYLE type="text/css">
<!--
body {
background-image : url("pigu1.png");
background-attachment: fixed;
background-position: 0% 0%;
background-repeat: no-repeat;
background-color:#666666;
}
-->
</STYLE>



これをリンクにすることは可能でしょうか?

また、画像を横にもう一つ増やせるのでしょうか?

教えてください。

宜しくお願いします。

Aベストアンサー

ご提示の場合、画像を背景として指定していますので、画像部分のみにリンクさせるのは難しいでしょう。
HTMLソース内に通常の <a href ~><img ~></a> の記述を行うことで、画像部分に対するリンクが可能になります。

どうしてもこのままというのを無理やり実現するのなら、javascriptで画面のクリックされた位置を分析し、画像が表示されている範囲だったらリンクみたいなことは不可能ではないと思いますが、まず現実的ではないでしょう。


>また、画像を横にもう一つ増やせるのでしょうか?
背景の繰り返しは、ご提示の
 background-repeat: no-repeat;
の部分で指定されています。
横方向の繰り返しは repeat-x、縦方向の繰り返しは repeat-y となりますが、1個だけという指定はできません。
どうしても1個だけ繰り返したいのであれば、背景の画像をあらかじめそのような(2個並んだ)ものにしておいて、 no-repeat で表示すれば可能です。

Qセルに画像を大きさがぴったりと合うように貼りつけたいと考えています。

セルに画像を大きさがぴったりと合うように貼りつけたいと考えています。
セルの大きさと画像の大きさを同じにしているのですが、セルの下が少し余っています。
セルのheightを画像の高さと同じ値に設定しています。
下記のようになっていますが、画像の縦幅は52です。
横幅も少し余っています。(つまり、セルの方が大きい)

<tr align="left" valign="middle" height="52">
<td>
<a href="test1.html"><IMG SRC="test1.gif" border="0" alt=""></a>
</td>
</tr>

どのようにすればいいのか教えてください。
HTMLについてはまだ初心者です。
どうぞよろしくお願いします。

Aベストアンサー

多分再現できたと思うので、試してみてください。
原因は
**********
<tr align="left" valign="middle" height="52">
<td bgcolor="#cccccc">
<a href="page1.html"><IMG SRC="test1.gif" border="0" alt=""></a>
</td>
</tr>
**********
3行目のaタグで改行されたときに、普通はCR+LFが入るので、その分が余白になっているかと思います。</a>の後を1回Deleteで消してみてください。

変更例
<TABLE width="100%" align="left" cellpadding="0" cellspacing="0" style="border:1px solid
#000000; padding:0px; background-color:#ffffff;">
<tr align="left" valign="middle">
<td bgcolor="#cccccc"><a href="page1.html"><IMG src="image1.gif" border="0" alt=""></a></td>
</tr><tr align="left" valign="middle">
<td bgcolor="#cccccc"><a href="page2.html"><IMG src="image1.gif" border="0" alt=""></a></td>
</tr><tr align="left" valign="middle">
<td bgcolor="#cccccc"><a href="page3.html"><IMG src="image1.gif" border="0" alt=""></a></td>
</tr>
</TABLE>

多分再現できたと思うので、試してみてください。
原因は
**********
<tr align="left" valign="middle" height="52">
<td bgcolor="#cccccc">
<a href="page1.html"><IMG SRC="test1.gif" border="0" alt=""></a>
</td>
</tr>
**********
3行目のaタグで改行されたときに、普通はCR+LFが入るので、その分が余白になっているかと思います。</a>の後を1回Deleteで消してみてください。

変更例
<TABLE width="100%" align="left" cellpadding="0" cellspacing="0" style="border:1px solid
#000000; padding:0px;...続きを読む


人気Q&Aランキング

おすすめ情報