テーブルに画像を入れたいと相談した初心者の質問
- テーブルに画像を入れたいと相談した初心者が、画像の下のテキスト部分の間隔が近すぎる問題についての正式な方法を知りたいと質問しました。
- 彼は自己流で問題を解決しましたが、もっと良い方法を求めています。
- 質問文章には、HTMLのテーブルに画像やテキストを配置するコードの一部が含まれています。
- ベストアンサー
先日テーブルの質問をした者です。
先日テーブルの中に画像を入れたいと相談した初心者です。 何とか形になりましたが、「画像の下のテキスト部分の選手名とポジションのすき間が上下のかけ線に近すぎた」ので自己流で離してみましたが、もっとちゃんとした正式な方法が知りたくて質問しました。 私のヘボソースを参考にご教授お願い致します。(汗) <html> <head> <title>○○メンバー紹介</title> </head> <br> <br> <th><center><i><font size="6px" color="white" face="IMPACT" >MEMBER</font></i></center></th> <center><i><font size="5px" color="white" face="IMPACT" >（2005年チーム）</font></i></center> <br> <br> <body bgcolor=navy> <center><table border="1" cellpadding="0" cellspacing="0"> <tr> <td><img src="1234.jpg" width="280" height="210" alt="選手の画像"></td> <td><img src="1235.jpg" width="280" height="210" alt="選手の画像"></td> <td><img src="1236.jpg" width="280" height="210" alt="選手の画像"></td> </tr> <TR BGCOLOR="#696969"> <Td Align="center" Valign="middle"><font color=white> <br>キャプテン○○○<br>○○○<br>ガード<br> </font></td> <Td Align="center" Valign="middle"><font color=white>副キャプテン×△○<br>×○△<br>ガード</font></td> <Td Align="center" Valign="middle"><font color=white>2年○××<br>○××<br>フォワード</font></td> </tr> </table> </body> </html>
- yououou
- お礼率95% (22/23)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
選手名などが書かれているセルの高さを指定してはどうですか。こんな感じで。 <TR BGCOLOR="#696969"> <Td height="100" Align="center" Valign="middle"><font color=white>キャプテン○○○<br> ○○○<br>ガード<br></font></td> <Td height="100" Align="center" Valign="middle"><font color=white>副キャプテン×△○<br> ×○△<br>ガード</font></td> <Td height="100" Align="center" Valign="middle"><font color=white>2年○××<br> ○××<br>フォワード</font></td> </tr> 強いていうならテーブル、セルの幅サイズは指定したほうがいいですよ。
関連するQ&A
- テーブルの縦が縮まらない
質問させて下さい。テーブルで表を作ったのですが、縦幅が 縮まらなく困っています。 具体的には、セル内の余白を５ピクセルにしているのですが テキストとセルの境界線の縦の距離が何倍も開いてしまいます。 ソース↓ （ボディ内はこれで全てです。テキストを変えただけです。 使用ソフトはドリームウィーバー８） --------------------------------------------------------- <table width="490" height="395" cellpadding="0" cellspacing="0" bgcolor="#666666"> <tr> <td width="490" height="393"> <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="1"> <tr> <td width="121" height="35" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td width="344" height="35" align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> <tr> <td height="22" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> </table> </td> </tr> </table> --------------------------------------------------------- 試したこと：各セルの縦幅を揃えて指定してみる。指定を全て 外してから、再度調節してみる。セル内のテキスト 表示位置を上位置に設定してみるなどです。。。 どこかすごい見落としをしているのでしょうか。よろしくお願い します。
- ベストアンサー
- HTML
- ホームページ製作過程で、タグの組み方に困っています。
テーブルを <TABLE cellpadding="0" bgcolor="#000000" border="3"> <tr> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> <td valign="middle" align="center" width="13" height="23"><font face="" color="#FFFFFF" size="3">0</font></td> </tr> </TABLE> のように組んでいます。 これは同盟に参加している人数を表示するためのものなのですが、このテーブルの左右に 現在のメンバー ○○○○ 名 （○→テーブル） のように字をするにはどうすればいいのでしょうか。 また、この字を含めたテーブル全体の表示位置を指定するにはどうすればいいのでしょうか この２点について教えていただきたいです。よろしくお願いいたします。
- 締切済み
- HTML
- テーブル内でのランダムな並べ変え
全然知識がないのですがよろしくお願いします。 タグで <table border="0"> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> </table> このようなテーブルがあって、その順番をページ更新でタイトル・画像・文書を一枠としてクルクルランダムに入れかえたいのですが、どうしたらいいでしようか？ 今後、この一枠がドンドン増えて行って、それも含めて全ての枠をランダムに入れ替えたいのです。 jqueryで簡単にできるようなことは聞きましたが、私には知識がないので助けてください。 よろしくお願いします。 http://www.finefinefine.jp/web/kiji2068/ ここを見れとも言われたのですが、スクリプトは私には不明です・・・
- ベストアンサー
- JavaScript
- VBAでホームページに表示された情報をセルに分割して取得していきたいのですのですがどのように記述したらよろしいでしょうか。
宜しくお願い致します。 HTMLを長々と記述しておりますが、お許しください。 VBAでホームページに表示された情報をセルに分割して取得していきたいのですのですがどのように記述したらよろしいでしょうか。 以下のようなHTMLがありまして、エクセルのWEBクエリを利用して取得していこうかと思ったのですが、エラーが表示されてしまいうまく取得することができませんでした。 そこで、ブラウザコントロールでしたら、ページが表示された時点で、 すべての情報の取り込みが完了してますので、HTMLをうまく解体すればセルに情報を格納できるかと思ったのですが、どのようにデータを解体・取得すればいいのかが分からない状態ですので、是非御教授いただけたらと思っております。 なお、以下のHTMLは一行目に項目二行目にその項目に基づいた情報が記載されておりまして、今回は二行目までの記述となっておりますが、基本的には複数行にわたるものとなっておりますので、是非その点に関しても踏まえたうえでのアドバイスをいただけたらと思っております。 ご面倒をおかけいたしますが、何卒宜しくお願い致します。 <TABLE width="100%" border="1" cellspacing="1" cellpadding="3"> <TR bgcolor="#006633"> <TD align="center" nowrap><FONT color="#FFFFFF">訂正<BR>取消</FONT></TD> <TD align="center" width="11%"><FONT color="#FFFFFF">口座区分</FONT></TD> <TD align="center"><FONT color="#FFFFFF">銘柄</FONT></TD> <TD align="center" width="13%" nowrap><FONT color="#FFFFFF">取引区分<BR>執行条件</FONT></TD> <TD align="center" width="5%"><FONT color="#FFFFFF">売買</FONT></TD> <TD align="center"><FONT color="#FFFFFF">発注数[株]</FONT></TD> <TD align="center"><FONT color="#FFFFFF">値段[円]</FONT></TD> <TD align="center" width="8%"><FONT color="#FFFFFF">受付日時</FONT></TD> <TD align="center" width="5%"><FONT color="#FFFFFF">有効期間</FONT></TD> <TD align="center" width="5%"><FONT color="#FFFFFF">状態</FONT></TD> <TD align="center"><FONT color="#FFFFFF">約定<BR>数量[株]-単価[円][時間]</FONT></TD> </TR> <TR bgcolor="#CCCCCC"> <TD align="center" valign="middle" bgcolor="#CCCCCC"><BR></TD> <TD align="center" valign="middle">**</TD> <TD align="center" valign="middle"><A href="/servlet/ITS/direct/DirectStkOrder;********************・・・・" onClick="return linkCheck()"><FONT color="#211799"><B>*****</B><BR>*****/FONT></A></TD> <TD align="center" valign="middle">**<BR>－</TD> <TD align="center" valign="middle"><FONT color="#990000"><B>*</B></FONT></TD> <TD align="right" valign="middle">****</TD> <TD align="right" valign="middle">****</TD> <TD align="center" valign="middle">**/**<BR>*******</TD> <TD align="center" valign="middle">当日</TD> <TD align="center" valign="middle"><B><A href="/servlet/ITS/stock/StkOrderDetail**********************・・・・・" onClick="return linkCheck()"><FONT color="#211799">**</FONT></A></B></TD> <TD align="right" valign="middle"><BR></TD> </TR> </TABLE>
- 締切済み
- Visual Basic
- デーブルが延びる
たまにテーブルが意図しないかんじで右にのびる場合が あります。これを防ぐにはどうすれば、いいですか？ どういうタグを打てばいいですか？ <table width="85%" border="0" cellspacing="0" cellpadding="2" bgcolor="#ff0066"><trheight="216"> <td valign="top" align="center" bgcolor="#ff0066" width="786" height="216"><table width="786" border="0" cellspacing="0" cellpadding="2" bgcolor="#eeeeee"><tr> <td colspan="2" bgcolor="#ff0066" width="782" height="23" valign="top"><div align="left"> <font size="3" color="white" face="MSゴシック,OSAKA">例</font><b><font size="2" color="white"><font size="3" face="arial,verdana"><b><br></b></font></font></b></div></td></tr> <tr height="158"><td colspan="2" align="center" bgcolor="white" width="782" height="158"> <div align="left"><br> <font size="3" color="#555555" face="MSゴシック,OSAKA">テスト募集</font><font size="2" color="#555555" face="MSゴシック,OSAKA">！</font> <p><font size="2" color="#555555">XXXXX参加して頂ける方を随時募集しております。<br> </font></p><p></p> <div align="left"><p></p></div></div></td> </form></tr><tr height="23"><td colspan="2" width="782" height="23" valign="top"> <div align="right"><br></div></td></tr> </table></td></tr><tr> <td valign="top" width="786"><br></td> </tr></table>ソフトはD WとGo Liveを使います。
- ベストアンサー
- HTML
- テーブルの枠の中にテーブルを設置
TOPページに下記のような大きな４等分の枠なしテーブルを作り、中にテーブルを埋め込みたいと思っています。 <TABLE border="0" width="700" height="500"> <TR> <TD>●1</TD> <td>●2</td></TR> <TR> <TD align="left" valign="bottom">◎1</TD> <td align="center" valign="middle"> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="8" cellspacing="0" bgcolor="greenyellow"><tr><td align="center"> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="4" cellspacing="0" bgcolor="#ccff99"><tr><td align="center"><font color="mediumseagreen">★ ★ ★</font> おしらせ <font color="mediumseagreen">★ ★ ★</font></td></tr> <tr><td bgcolor="white"> <textarea cols="28" rows="5"> ここに文字 </textarea> </td></tr></table> <br> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="3" cellspacing="0" bgcolor="white"><tr><td bgcolor="white"> 最終更新 ≫ </td></tr></table> </td></tr></table> </TR> </TABLE> （HEADの間にスタイルシートを挿入します。） このように書くとテーブルを入れた場所の親テーブルが大きく広がってしまいます。 広がらずにテーブルを形成する方法をご教授下さい。 初心者で申し訳ございません。
- ベストアンサー
- HTML
- テーブルの位置指定について
html編集で困っています。 <TABLE cellpadding="0" border="3" bordercolor="black" style="float:left;"> <TR> <TD rowspan="3" valign="bottom" align="center" width="76" height="75" background="background.jpg"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="95" height="25"><font face="" color="#ffffff" size="1"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="50" height="25"><font face="" color="#ffffff" size="2"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="40" height="25"><font face="" color="#ffffff" size="1"></font></TD> </TR> </TABLE> というようにテーブルを組みました。 このテーブル全体を、ページ全体の中で、 左右では左寄せ、上下では中央 に配置するにはどうすればいいのでしょうか。 パソコンの画面の大きさの違いでデザインが崩れてしまうので、上のような形に配置できればとてもうれしいです。 ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- HTMLについて
HTML初心者です。いろいろ調べながら下記の画像のテンプレートを作っているのですが、1枠と2枠の頭が揃いません。わかる方教えてください。画像が見づらいかもしれませんが宜しくお願い致します。 <html> <body> <br><center> <font size="6" color="#00000"> <b>タイトル</b> </font> <hr> <br><br> <table width="800" height="500" cellpadding="15" cellspacing="10" BORDER="4" bgcolor="F3F30E"> <tr> <td width="50%" rowspan="4" BGCOLOR="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 1 </u></b></font> <br><br> <font size="3" color="#00000"> </font> </td> </tr> <tr> <td width="50%" bgcolor="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 2 </b></u></font> <br><br> <font size="3" color="#00000"> </font> </td> </tr> <tr> <td width="50%" bgcolor="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 3 </b></u></font> <br><br> <font size="3" color="#00000"> </font> </td </tr> <tr> <td width="50%" bgcolor="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 4 </b></u></font> <br><br> <font size="3" color="#00000"> <b></b> </font> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルにCSSの枠のつけ方
はじめまして、こんにちわ。 HTMLで組んだテーブルにCSSの枠をつけたいと思っています。 ここのページhttp://www.rakuten.ne.jp/gold/royalparty/ の『NEW ITEMS』みたいに1列4行に枠をつけたい場合はどうしたら良いのでしょうか。よろしくお願いいたします。 組んだテーブルは下です。 <table class="newtable" cellspacing="0" cellpadding="0" border="0" width="610"> <tbody> <tr> <td class="photo" valign="middle" align="center" width="138"> 1-1 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-2 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-3 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-4</a></td> </tr> <tr> <td valign="top" align="left" width="138"> 2-1</a> </td> <td valign="top" align="left" width="138"> 2-2</a> </td> <td valign="top" align="left" width="138"> 2-3 </a> </td> <td valign="top" align="left" width="138"> 2-4</a> </td> </tr> <tr> <td valign="top" align="left" width="138">3-1</td> <td valign="top" align="left" width="138">3-2</td> <td valign="top" align="left" width="138">3-3</td> <td valign="top" align="left" width="138">3-4</td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- CSS セルごとリンクにする際、リンク文字を上下中央寄せにしたい
セルごとリンクにしたくて、以下の記述をしました。 【CSS】 ------------------------------------------------------------------ a.widelink{ vertical-align:middle; display:block; // display:inline-block; width: 100%; height:100%; // line-height:100%; color: #000000; text-decoration:none } a.widelink:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; text-decoration:none } td.bgchng{ align: center; vertical-align: middle; color: #000000; margin: 0px; padding: 0px; } td.bgchng:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; margin: 0px; padding: 0px; } ------------------------------------------------------------------ 【HTML】 ------------------------------------------------------------------ <TABLE border="1" bordercolor="#6666CC" cellspacing="0"> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test01.html" CLASS="widelink"> テスト<BR>（その１） </A> </TD> <TD width="450" bgcolor=""> テスト（その１）の説明文<BR> 二行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test02.html" CLASS="widelink"> テスト（その２） </A> </TD> <TD width="450" bgcolor=""> テスト（その２）の説明文<BR> 二行目<BR> 三行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test03.html" CLASS="widelink"> テスト（その３） </A> </TD> <TD width="450" bgcolor=""> テスト（その３）の説明文<BR> 二行目 </TD> </TR> </TABLE> ------------------------------------------------------------------ この記述だとリンク文字がセルのTOPに来てしまい、中央寄せになりません。 思いつく限りの場所にvertical-alignやvalignを仕込んでみましたがダメでした。 line-heightであわせる方法もやってみましたが、<BR>を含むリンク文字の表示が二行揃ってくれず、ダメでした。 セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。
- 締切済み
- HTML
お礼
本当にありがとうございました！ セルの高さを指定しただけで、一発で直りました。 それから幅も指定しておきました。 あの苦労した数時間はなんだったのでしょう。(泣) これでまた一つ勉強になりました。 m(_ _)m