• ベストアンサー

この命令文なのですが

<TABLE border=0 Cellspacing=0> <TD> <TR><A HREF="リンク先のアドレス"><IMG SRC="profile.gif"border=0></A><TABLE BORDER=0 BACKGROUND="profile-4.gif" WIDTH=83 HEIGHT=70><TD>Menu</TD></TABLE></TR> </TD> </TABLE> 二つの画像を使って、リンクに飛ぶ画像と背景画像に文字を入れた画像を枠の隙間なく、左右に並べて表示させようとしたのですが、上の命令文だと、画像が上下に並んでしまいます。 どうすればよいか初心者で分かりませんので、お分かりになられる方どうか教えてください。お願いします。

  • HTML
  • 回答数3
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • 345itati
  • ベストアンサー率48% (795/1639)
回答No.2

取り合えず突っ込み所が多いタグの記述なので・・・ <table border="0" cellspacing="0"> <tr> <td><a href="リンク先URL"><img src="profile.gif" width="幅" height="高さ" border="0"></a></td> <td><table background="profile-4.gif" border="0"><tr><td>Menu</td></tr></table></td> </tr> </table> で左右には並びますが、 <table border="0" cellspacing="0"> <tr> <td><a href="リンク先URL"><img src="profile.gif" width="幅" height="高さ" border="0"></a></td> <td background="profile-4.gif">Menu</td> </tr> </table> の方がお望みの感じには近いかもしれません。 (規格外の属性が含まれている為、余りお勧め出来ない書き方です。 基本的にレイアウトは<table>タグではなくCSSを使った方がいいと思いますが。

その他の回答 (2)

  • pi8027
  • ベストアンサー率11% (6/53)
回答No.3

回答と云うか突っ込み ・table要素は表をマークアップする為の要素なのでレイアウトに使うのは間違っている。 ・img要素にはalt属性が必須。 ・img要素のborder属性は好ましくない。 ・table要素のcellspacing属性も好ましくない。 ・table要素のborder属性も好ましくない。 ・table要素のbackground属性も好ましくない。 ・table要素のwidth属性も好ましくない。 ・table要素のheight属性も好ましくない。 ・HTMLはマークアップ言語であり、タグは命令文ではない。(HTML関連で命令と言えばxml-stylesheet処理命令とか……) 所謂"駄目講座"の被害者の様ですね。 HTML講話(http://web.xii.jp/iec/html/ )等でHTMLを勉強し直す事を推奨。

  • Werner
  • ベストアンサー率53% (395/735)
回答No.1

まず表示以前の問題として、正しいHTMLになってないです。 table要素の直下にtd要素をいきなり置くことはできず、 tableの中にtr、さらにその中にtd(やth)が入るようにしなければなりません。 たぶん本やどこかのサイトを見てHTMLについて調べているのだと思うので、 見直しておいた方がよいと思います。 (あと、命令文というのも変だけど、そう書いてある本やサイトが結構あるのかな…。) tableを使って横に並べる方法ですが、以下のようにすればできると思います。 (インデントに全角スペースを使っているので注意。) ---------------------------------------------------------- <table border="0" cellspacing="0">   <tr>     <td><a href="url"><img src="profile.gif"></a></td>     <td background="profile-4.gif" width="83" height="70">Menu</td>   </tr> </table> ---------------------------------------------------------- # 個人的にはテーブルレイアウトはあまり好きではないですが、とりあえずそれは置いておきます。

関連するQ&A

  • オブジェクトを指定してください、のエラーについて

    HTML作業中、下記のようなエラーメッセージが表示されます。 エラー:オブジェクトを指定してください。 文字:3 コード:0 恐らく↓この辺りでエラーが起きているのだとは思うのですが… どなたか分かる方はいらっしゃいますでしょうか?それと、 ライン:200 ↑この数値は、ソースを表示させたときの行数でいいのでしょうか? メモ帳で開くと「行へ移動」ができなかったもので… 他にエラー場所を知る方法があれば教えてください。 <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="right"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','img/click2.gif',1)"><img src="img/click1.gif" alt="クリック!" name="Image46" width="64" height="49" border="0"></a></td> <td colspan="2" align="right"><img src="img/suga-3.gif"></td> </tr> </table> <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="12" colspan="4"><img src="img/ue.gif" width="179" height="12"></td> </tr> <tr> <td width="14" height="124" background="img/hidari.gif"><img src="img/hidari.gif" width="14" height="7"></td> <td width="146" background="img/back.gif"><table width="145" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/main1.gif" width="70" height="102" hspace="2"></td> <td valign="top" class="text12">画像</td> </tr> </table> <img src="img/botan.gif" width="146" height="17"></td> <td width="19" background="img/migi.gif">&nbsp;</td> </tr> <tr> <td height="12" colspan="4"><img src="img/sita.gif"></td> </tr></table>

  • テーブルを作ったんですが…

    はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>

  • IEとFirefoxでリンクの「hover」の状態が異なります。

    IEとFirefoxでリンクの「hover」の状態が異なります。 メニューに画像を使っているのですが、IEとFirefoxでは「hover」時のbackground-colorのかかり方が異なります。 IEだと画像全体にかかるのですが、Firefoxでは画像の下の方だけにしか色がつきません。 画像をテキストに変更すると、テキスト全体にきちんとかかります。 画像に問題があるのでしょうか? どうすれば解決するのか教えてください。 以下にメニューのソースを載せておきます。 (HTML) <table width="100%" height="40" cellspacing="0"> <tr> <td width="100" ><a href="page1.html"><img src="menu1.gif" border="0" alt=""></a></td> <td width="100" ><a href="page2.html"><img src="menu2.gif" border="0" alt=""></a></td> <td width="100" ><a href="page3.html"><img src="menu3.gif" border="0" alt=""></a></td> <td width="100" ><a href="page4.html"><img src="menu4.gif" border="0" alt=""></a></td> <td width="100" ><a href="page5.html"><img src="menu5.gif" border="0" alt=""></a></td> <td width="100" ><a href="page6.html"><img src="menu6.gif" border="0" alt=""></a></td> <td width="100" ><a href="page7.html"><img src="menu7.gif" border="0" alt=""></a></td> </tr> </table> (CSS) a:hover { background-color: #000000;} どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • ハーボットのフレーム。

    某サイトでハーボットのフレームの枠を配っていたので つけようと思ってやっていましたが、 枠は出来たのですがその中にハーボット本体を入れることが どうしても出来ないんですけどどうやっていれるのでしょうか? 因みにhtmlは。 <TABLE width="142" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD rowspan="3" width="14" height="245"><IMG src="***/habwaku02.gif" width="9" height="247" border="0"></TD> <TD width="125"><IMG src="***/habwaku01.gif" width="127" height="37" border="0"></TD> <TD rowspan="3" width="6" height="245"><IMG src="***/habwaku03.gif" width="9" height="247" border="0"></TD> </TR> <TR> <TD width="125" align="center"><IMG src="***/hw1.gif" width="125" height="199" border="0"></TD> </TR> <TR> <TD width="125"><IMG src="***/habwaku04.gif" width="127" height="9" border="0"></TD> </TR> </TBODY> </TABLE> で=***/habwaku0*.gifの部分は全てうまく画像が出来ました。 あとはここに画像URLを入れるだけとなっていましたが 入れ方を教えてください。

  • <td> 内のテーブルを上寄せにするには?

    すみません教えていただけますか? 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか? よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> &nbsp; </td> </tr> </table>

    • ベストアンサー
    • HTML
  • どうやったらこの画像にリンクできるでしょうか?

    現在ホームページを作成しているのですが、「ホーム」「プロフィール」「works」「ブログ」「名言」「ムービー」「メルマガ」のところにリンクが貼れません。 <a href="http://*************"> <td width="100" background="ホーム".png></a></td> 上記のようにやってもできません。 どこがどう間違っているのでしょうか? 下記に書いてあるのが、前後の部分です。 <table width="700" height="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="center"> <tr> <td width="700" height="129" background="aa.png" align="center" valign="middle"> </td> </tr> <tr> <td width="700" height="30"> <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"> <tr align="center" valign="middle"> <td width="100" background="ホーム".png></td> <td width="100" background="プロフィール".png></td> <td width="100" background="works".png></td> <td width="100" background="ブログ".png></td> <td width="100" background="名言".png></td> <td width="100" background="ムービー".png></td> <td width="100" background="メルマガ".png></td> </tr> </table> </td> </tr>

    • ベストアンサー
    • HTML
  • このテーブルタグの中の色を白にするには

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .border{ font-size : 1pt; } --> </STYLE> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_1.gif" width="20" height="20" border="0"></TD> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> <TD colspan="2" rowspan="2"><IMG src="images/001_base_2.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="18"></TD> </TR> <TR> <TD width="2" bgcolor="#000000"><BR> </TD> <TD width="18"></TD> <TD>ここに内容を書きます(画像<A href="images/001_base_1.gif">1</A>・<A href="images/001_base_2.gif">2</A>・<A href="images/001_base_3.gif">3</A>・<A href="images/001_base_4.gif">4</A>)</TD> <TD width="18"></TD> <TD width="2" bgcolor="#000000"><BR> </TD> </TR> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_4.gif" width="20" height="20" border="0"></TD> <TD height="18"></TD> <TD rowspan="2" colspan="2"><IMG src="images/001_base_3.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 現在はテーブルの内側の色が透明色(背景の色)になっています。 これを透明でなく白にする方法をおしえてください!

  • スタイルシートに関しての質問です。margin0 padding0と指定し居るのに、変なスペースが入ってしまいます。。。

    スタイルシートで、 *{ padding:0; margin:0; } img{ padding:0; margin:0; } と指定しているのですが、なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか? ソースは下記の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> <META content="新築マンション,賃貸,敷金ゼロ,礼金ゼロ,ペット可,内覧可能,水商売可,風俗可,東京,都内,マンション,アパート,一戸建, name=keywords> <title>株式会社</title> <link href="css/mainstyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" ></div> <div id="sidememu"> <table width="150" border="0" cellpadding="0" cellspacing="0" > <tr> <td><a href="#"><img src="img/menu1.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu13_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu5_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu4.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu11_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu10_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu3.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu9_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu6_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu8_h.gif" width="150" height="40" border="0"></a></td> </tr> </table> </div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> </div> </body> </html> cssは、 /* CSS Document */ *{ padding:0; margin:0; } img{ padding:0; margin:0; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidememu{ margin-top:20px; background-color:#F00; float:left; } #main{ margin-left:10px; margin-top:20px; float:right; } です。すみません。教えてください!

  • IEのテーブル表示の不具合でしょうか・・・?

    IEで正しく表示されているものが、別のページへ行って「戻る」ボタンを押すと、テーブルの表示が崩れてしまいます。 2列のテーブルの右側の部分が左側にかぶって表示されてしまうのです。 参考までにその部分のソースを以下に記述します。 何か気になる点などお気づきになられたら教えてください。 <table width="320" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td class="px12"> ・<a href=>あああああ</a><br> ・<a href=>いいいいい</a><br> ・<a href=>ううううう</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>えええええ</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>おおおおお</a><br> <hr width="160" size="1" noshade align="left"> </td> </tr> </table> </td> ※以下から左側のテキストにかぶって表示されてしまいます。 <td width="120"><a href=><img src="images/画像.gif" width="120" heigt="180" border="0"></a><br> <table width="120" border="0" cellspacing="2" cellpadding="0"> <tr> <td valign="top"><img src="images/矢印画像.gif" width="11" height="11" border="0"></td> <td class="px12"><a href=>テキストテキストテキスト</a></td> </tr> </table> </td> </tr> </table> 以下が私の環境です。 WindowsXP(HomeEdition)・SP2インストール済・IE6 よろしくお願いします。

  • テーブルとテーブルの間に、隙間があいてしまいます。

    お世話になります。 表題のとおりです。 下記ソースのテーブル<!-- 丸枠 -->と<!-- ヘッダ -->間は、問題ないのですが テーブル<!-- ヘッダ -->と<!-- ロゴ -->の間に隙間が開いてしまいます。 1時間ほど考えましたが、どうにもこうにも理由が分かりません。 初心者的なソースで恐れ入りますが、詳しい方にご助力いただければ幸いです。 ---------------------------以下ソース-------------------------------------- <body> <!-- 背景白 --> <table border="1" cellpadding="0" cellspacing="0" class="table_white"> <tr> <td> <!-- 丸枠 --> <table width="820" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="image/head.gif" width="820" height="9" /></td> </tr> </table> <!-- 丸枠ここまで --> </td> </tr> <tr> <td align="center"> <!-- ヘッダ --> <table width="730" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="324" height="15" align="left" > <strong class="seo01">ミ</strong></td> <td width="203">&nbsp;</td> <td width="5" align="center"><img src="image/spacer_glay.gif" width="1" height="10" /></td> <td width="42"><a href="kaisya.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','image/head_kaisya_ov.gif',1)"><img src="image/head_kaisya.gif" alt="会社概要" width="42" height="11" border="0" id="Image4" /></a></td> <td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td> <td width="61"><a href="toiawase.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('問い合わせ','','image/head_toiawase_ov.gif',1)"><img src="image/head_toiawase.gif" alt="お問い合わせ" width="61" height="11" border="0" id="問い合わせ" /></a></td> <td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td> <td width="62"><a href="sitemap.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sitemap','','image/head_sitemap_ov.gif',1)"><img src="image/head_sitemap.gif" alt="sitemap" width="62" height="11" border="0" id="sitemap" /></a></td> <td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td> </tr> </table> <!-- ヘッダ ここまで--> </td></tr> <tr> <td align="center"> <table width="730" border="0" cellspacing="0" cellpadding="0"> <!-- ロゴ --> <tr>     <td colspan="13" align="left"><a href="http://www.com/"><img src="image/logo.gif" alt="ミ" width="92" height="48" border="0" ></a></td> </tr> <!-- ロゴ ここまで --> ---------------------------ソースここまで-------------------------------------- ---------------------------念のため使用CSS-------------------------------------- body { font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size: 12pt; font-weight: normal; color: #5c5c5c; background-color: #889fb6; margin-left: 30px; margin-top: 30px; letter-spacing: 2.5px; line-height: 18px; } .table_white { background-color: #FFFFFF; width: 820px; } .seo01 { font-size: x-small; letter-spacing: normal; font-weight: normal; } ---------------------------ここまで--------------------------------------

    • ベストアンサー
    • HTML