- ベストアンサー
TABLEのなかに画像を入れたい
<table>の<td>～</td>のなかに以下の条件で画像を入れたいのですができますか？ ・画像は一回だけ使用する（繰り返さない） ・（もしできるようなら）<td>の中の文章量によってサイズが長くなったり短くなったときに画像を自動でサイズを合わせられるようにしたい。 イメージとしてはbackgroundをつかって背景画像を指定。 その画像の上に文章を書いていく。 文章の量によって将来的にはおそらく縦に伸びていってしまうので、そのたびに画像を編集しないですむよう縦長にはなるが、自動で縦横の比率を調整できるようにする。（テーブルと同じサイズにする） です。<body>のなかに画像固定をして入れるのはわかるのですが、<table>ではやり方がわからなくて困っています。（同じようにstyleを使うのでしょうかね？）<table>～</table>の中を簡単に書いていただけると助かります。
- lelouch01
- お礼率51% (35/68)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 素直に、そのままコピー&ペーストされればよいと思いますが。参考↓ <table border=1> <tr> <td align="center" valign="top" width="25%" height="40" style="background-image:url(http://oshiete1.goo.ne.jp/images_goo/goo.gif); background-repeat:no-repeat;background-position:center center;">サンプル</td> </tr> </table>
その他の回答 (2)
- moemode
- ベストアンサー率0% (0/3)
テーブルタグについて説明しているサイトがあるので紹介します！ テーブル（table）タグのページ http://www4.plala.or.jp/htmltag/newpage59.html リンク・画像のページ http://www4.plala.or.jp/htmltag/newpage29.html <td>～</td>の中に画像を入れて表示できますよ （最初は画像サイズが小さい物でチャレンジするといいですよ！ 自分は大きい画像を入れてレイアウトが崩れた経験があるので）
- gura_
- ベストアンサー率44% (749/1683)
たとえばこんな感じですか↓ <table border=1> <tr> <td >・画像は一回だけ使用する</td> <td>（繰り返さない）</td></tr> <tr> <td style="background-image:url(http://oshiete1.goo.ne.jp/images_goo/goo.gif); background-repeat:no-repeat;background-position:center center;"> このような表示は、<br>いかがですか<br> 背景画像幅に合わせて、<br>幅を調整することは出来ません→ </td> <td align=center style="background-image:url(http://oshiete1.goo.ne.jp/images_goo/goo_h1_50b.gif); background-repeat:no-repeat;background-position:center center;"> ----- </td> </tr> </table>
関連するQ&A
- 背景画像がテーブルに透けてしまう
<body background="画像のURL"> <STYLE TYPE="text/css"> <!-- BODY { background-color: white} --> </STYLE> <Table Border="1" Width="サイズ"> <Tr> <Td ColSpan="サイズ" Align="位置">～ という感じでページを作っているのですが、 背景の画像が透けてテーブルの中の文字が見え難く 困っています。 テーブルの中は「white」で白に指定している つもりなのですが、白になりません。。 このタグでテーブルの中を背景が反映されず真っ 白にする方法ってあるのでしょうか？ 調べてみたのですがどうも分からないので教えて下さい。
- ベストアンサー
- レンタルサーバ・ASP
- tableの中のtableの表示と外側（大きい方）のtableに背景画像を表示させる方法
非常にわかりにくいタイトルで申し訳ありません。tableの中にtableを入れて、外側（大きい方）のtableだけ背景画像を表示させたいのですがどのようにすればいいのでしょうか？下記ソースまでは作ったのですが、中（小さい方）のtableがなぜか右よりになってしまいます。小さいtableを真ん中にして、そのtableの周りを画像で囲みたいのですがどのようにすればいいのでしょうか？もちろん、下記ソースでなくても全然かまいません。htmlはまだまだ勉強中で詳しい方からすれば非常に見難いソースで申し訳ありませんが、ぜひお力添えいただけたらと思いますのでよろしくお願いします。 ↓ソース <html> <head> <body> <title>タイトル</title> <TABLE background="画像jpg"><TD width="10%" height="10%"><TR></TD><TD height="100%"></TD><TD width="100%" height="100%"><TD width="100%"><TD> <TABLE border width="600" height="100%" bgcolor="white"> <TR> <TD> 文章 </TD> </TR> </TABLE> </CENTER> </body> </html>
- ベストアンサー
- ブログ
- operaだとテーブルがなくなります
operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; width:100%; height:10% } .midori{background-color:#999933; width:100%; height:3.3% } ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか
- ベストアンサー
- HTML
- TABLEの高さを固定したいのですが…
現在TABLEタグを利用してHPのレイアウトを作成しているのですが 高さが固定できずに困っています。 ソースですが <table border="0" cellpadding="0" cellspacing="0" width="600" height="800"> <tr> <td width="300" height="600" background="img/back1.jpg" align="left" valign="top"> <p>【１】</p> </td> <td rowspan="2" align="left" valign="top" width="300"> <p>【２】</p> </td> </tr> <tr width="300"> <td background="img/back2.jpg">【３】<img src="img/back2.jpg"></td> </tr> </table> これで ┌───────────────┐ │ │ │ │ │ │ │ │ │ │ 【１】 │ │ │ │ │ ├─────┤ │ │ │ 【２】 │ │ │ │ │ 【３】 │ │ │ │ │ │ │ │ │ │ │ └─────┴─────────┘ という形を作成したいと考えています。 この時【１】は高さ600pxの固定サイズで、【２】に画像や文章が追加され縦に伸びるたびに【３】に設定してある背景画像（background="img/back2.jpg"）がループしながら縦に伸びていくようにしたいと考えています。 ところがIE8以降で確認すると、【１】が固定されずに【２】に合わせてどんどん伸びてしまいます。 逆に【３】が固定されているようです。 別にテーブルを使用しなくても【１】だけが固定されて【２】と【３】が内容によって同時に動き、かつ【３】の背景が伸びていけば構わないので「別のやり方があるよ」というアドバイスだけでも頂ければと思い質問させていただきました。 よろしくお願いします。
- 締切済み
- HTML
- 画像クリックで指定のテーブルの背景画像を変えたい
文字をクリックすると指定のテーブルの背景色が変わるようにしたい、という事で <table border width=100 height=100><td id="aa">aa</td></table><br> <span onClick="aa.style.background='red'">赤</span> を教えて頂いたのですが、これをテキストではなく画像にするの場合は <span onClick="aa.style.background='gazou.gif'"><img src="gazou.gif"></span> でやってみたものの出ませんでした。これではだめなのでしょうか＾＾；
- ベストアンサー
- HTML
- CSSを使った丸ナンバー付きテーブルの挿入
HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。
- ベストアンサー
- HTML
- 画像にオンマウスで背景画像を固定
画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか？ 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </HEAD> <BODY> <TABLE cellspacing="0"> <TBODY> <TR> <TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ---------------------------------- 「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。 また、styleに <!-- BODY { background-attachment: fixed; background-repeat: repeat-x; background:position:top} --> を書いてみたりもしたのですが変化なしでした。 ご存知の方、詳しい方アドバイスお願いします。
- ベストアンサー
- HTML
- liタグ中の二つのTABLEの間を埋めたい
お世話になります。 現在二つのテーブルタグを埋めたくて、思考錯誤中です。 普通にTABLEタグを利用すると、二つのテーブルは隙間なく埋まります。 これをliタグに持っていくと、隙間が発生しております。 これを埋める方法はありませんでしょうか？ 何卒よろしくお願いします。 （ちなみに私の環境はIE6です。） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body style="background-color:Black;"> <div> <table> <tr> <td> <table style="background-color: Red;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Red;"> <tr> <td> b </td> </tr> </table> </td> </tr> </table> </div> <ul> <li style="text-align: left; vertical-align: middle;"> <table style="background-color: Yellow;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Yellow;"> <tr> <td> b </td> </tr> </table> </li> </ul> </body> </html>
- ベストアンサー
- HTML
- テーブルの特定のセル背景非スクロールについて
テーブルで文章を書いているのですが、 そのテーブル内の文章がちょっと長めで、 どうしてもブラウザがスクロール(縦)してしまう作りになっています。そのテーブルに背景を入れようと思うのですが、スクロールしてしまうほど長い縦テーブルな故に背景も繰り返してしまいます。 背景画像は壁紙のような整列された画像ではなく、一枚の写真を使用したいとおもっております。 縦長の大きい背景を作るというのも一つの手ですが・・・それではなくタグ命令で固定できればと思います。 通常のページ背景ですと背景固定は ◆bodyタグで bgproperties="fixed" ◆スタイルシートで <STYLE type="text/css"> <!-- BODY{background-image:url("■.jpg"); background-color:#背景色; background-position:背景の位置; background-repeat:no-repeat; background-attachment:fixed;} --> </STYLE> って出来るのですが、 テーブル内部の特定のセル背景固定というのは どのようにしたら出来るのでしょうか? ジャバスクリプト、スタイルシート、通常のタグ どのような方法でもかまいません。 テーブル内の特定のセル背景非スクロールについて、 ご教授いただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。
CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。 スタイルシートで、画像の縦サイズに合わせて中央揃えで文字を表示したいのですが、 どのように記述したら良いのかわかりません。 下記のようにテーブルを使えば簡単に出来るのですが、 これをスタイルシートのみで表現するにはどのように記述すればいいのでしょうか？ ちなみに左側画像の縦サイズは変わります。 よろしくお願いします。 ------------------------------------------------------------------- <html> <head> <title>CSS</title> <style type="text/css"> <!-- #waku { width: 451px; margin: 0; padding: 6px 8px 6px 8px; background-color: #008837; } --> </style> </head> <body> <div id="waku"> <table width="435" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="80"><img src="hoge.gif" width="80" height="変わります"></td> <td width="355" valign="middle">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------
- 締切済み
- HTML
補足
試してみましたが、動きませんでした。 下のように入れてみましたが、画像がまったく読み込まれませんでした。 <td valign="top" width="25%" style="background-image:url(http://oshiete1.goo.ne.jp/images_goo/goo.gif); background-repeat:no-repeat;background-position:center center;">