セルからリンクを貼る方法について
- テーブルのセルにリンクを貼る方法について質問があります。
- 質問者はテーブル内のセルにリンクを貼ろうとしていますが、HTMLの書き方に悩んでいます。
- ホームページビルダーで読み込むとエラーになるため、適切な方法を知りたいと考えています。
- ベストアンサー
セルからリンクを貼るのは間違いでしょうか？
テーブルの中のセルからリンクを貼っています。 htmlは下記のように記述しています <table> <tr> <a href="***"> <td>あいうえお</td> </a> </tr> </table> 「あいうえお」の部分にカーソルを載せると背景色が変わるonmouseoverを使用しているので、このような記載でいいのかとかんがえており、実際意図したように表示されるのですが、ホームページビルダーで読み込むとエラーになり、勝手にリンク部分の記載がエラー修正で直されてしまいます。 そもそもこういう書き方は間違いなのでしょうか？ 間違いだとすれば、どういう風に記載すればよいのでしょうか？
- egypt
- お礼率87% (175/199)
- HTML
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
セルをクリックしたらリンク先に遷移する処理、これでできました。 <HTML> <HEAD> <TITLE></title> <SCRIPT language="JavaScript"> <!-- function goPage(){ document.forms[0].action="xxx.htm"; document.forms[0].submit(); } // --> </Script> </HEAD> <BODY> <FORM> <TABLE border="1"> <TR> <TD onclick="goPage()">クリックすると遷移します</TD> </TR> </TABLE> </FORM> </BODY> </HTML> ホントはファンクションにする必要ないかもしれませんが。 <TD>タグの属性（？）にはonclick等のイベント使えるみたいです。 あ、ただし私はホームページビルダーは使っていないので、読み込んだ際にどうなるかわかりません。
その他の回答 (4)
- Spur
- ベストアンサー率25% (453/1783)
文法的には皆さんが言われるように、リンクを張りたい文字を<A>と</A>で囲み、それをセルの中に入れなければなりません。 文字からリンクすれば良いのですよね？ セルではなくて・・・ 文字数に係わらず、セル全体のどこをクリックしてもリンクするようにしたいのであれば、かなり工夫が必要です。 つまり、文字の前後の空白でもクリックできるようにするということですけど。 そうではないですよね？ ならば、皆さんが言っている方法で良い、というか、それしかありません。 セル全体をクリック対象にするなら、透過画像でセルと同じ大きさのものを作って、そこからリンクするのが簡単でしょうね。
お礼
回答ありがとうございます。 セルを枠で囲み、背景に色をつけ、マウスオーバーで色が変わるようにしてボタンのような感じにしているのです。 画像にすれば簡単なのですが、少しでも軽くしたいと思ってこのような処理をしています。 そういうわけで、できればセル全体からリンクしたいのです。
- KODAMAR
- ベストアンサー率26% (267/1006)
ビルダー使ってないのではっきりとはわからないのですが、 <tr> <a href="***"> <td>あいうえお</td> </a> ↓ <tr> <td><a href="***"> あいうえお</a></td> の方がのぞましいんでしょうね。 でもなぜ文字なのに、セル(TD部分）にリンクを貼る必要があるんでしょうか？ イメージに貼りたいのなら <a href=**><IMG src=**></a> でいいわけですし…。 画像ではなくて、四角いボタンぽいものにリンクをはりたいってことでしょうか？ でも動作してるのなら問題ないのでは？ （ビルダーの件は仕方ないので手で変更するか、ビルダーを使わないとか…） 答えになってなくてすいません。
お礼
早速回答ありがとうございます。 セルを枠で囲み、背景に色をつけ、マウスオーバーで色が変わるようにしてボタンのような感じにしているのです。 画像にすれば簡単なのですが、少しでも軽くしたいと思ってこのような処理をしています。
- ryota2
- ベストアンサー率43% (61/140)
<tr>が含む事の出来る要素は<th>と<td>だけですから、 <a>要素を入れる事は出来ません。 正しくは <table> <tr> <td> <a href="***">あいうえお</a> </td> </tr> </table> とすべきです。 たぶん、IEは甘いから表示してくれますね。
補足
早速回答ありがとうございます。 言葉足らずだったようですが、やりたいのは文字からのリンクではなく、セル全体 からのリンクなんです。 せっかく回答していただいたのにすいません。 表示できてるからいいんでしょうかね？
- shy00
- ベストアンサー率34% (2081/5977)
一般的には以下の様に記述します。 <table> <tr> <td><a href="***">あいうえお</a></td> </tr> </table>
お礼
早速回答ありがとうございます。 言葉足らずだったようですが、やりたいのは文字からのリンクではなく、セル全体 からのリンクなんです。 せっかく回答していただいたのにすいません。
関連するQ&A
- セルをまたがるリンク。
セルをまたぐようなリンクを作りたいのですが、何かいい方法はないでしょうか。 記述は間違っていますが、イメージ的には以下のようなことがしたいです。 <table> <tr> <td><a href="#">09月20日</td> <td>題名</a></td> </tr> </table> これができない理由はなんとなくわかっているので、これを実現するような方法は何かないでしょうか？
- ベストアンサー
- HTML
- テーブルリンクで別ウインドウで開くようにするには？
<table> <tr> <td onClick="window.location.href='a.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">a</td> </table> このようにしてオンマウスでTD内の色を変え、TD全体でリンクさせる時、別ウインドウで開くにはどうしたらよいですか？ それとも、テーブルリンクで別ウインドウで開く指定は出来ないんでしょうか？ <table> <tr> <td onClick="window.location.href='a.html' XXXXX" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">a</td> </table> XXXXXの部分にtarget='_blank'と入れてみたんですが、今度はリンクのアクションすらしなくなってしまいました。 よろしくお願いします。
- 締切済み
- HTML
- CSS：横一列にリンクする文字の見栄えをよくする
リンクする文字が横一列のとき、見栄えをよくするのにテーブルを使うと思うのですが、そのときの質問があります。 ■HTML <table> <tr> <td><a href="">プロフィール(Profile)</a></td> <td><a href="">日記(Diary)</a></td> <td><a href="">絵(Picture)</a></td> <td><a href="">疑問(Question)</a></td> </tr> </table> このような場合、CSS「{width}」を「td」や「tr」で使えないのはなぜでしょうか？ また、リンクする文字と文字の間（プロフィール(Profile)←→日記(Diary)）を均一にするにはCSSのどのプロパティを使えばいいのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- セルの背景画像の変更
リンクに触ると背景画像をp15.jpgに変更したいのですが よろしくお願いします。 <table> <tr><td>123</td> <td background="p10.jpg"><a hrf="abc.html">abc</A></td> <td>456</td> </tr></table>
- ベストアンサー
- JavaScript
- htmlでtableからlinkする方法？
html(plain text)でtable内の言葉をクリックすると同一ファイル内の他のファイルにリンクする場合はどうするんでしょうか？ <table> ＜ｔｒ＞ <td a href="morning.html">morning</td> ＜/ｔｒ＞ </table> でリンクへ行くでしょうか？行かないので、どう書くか？教えてください。いろいろサイトを探してるんですけど、表の書き方は出てるんですが、表内の言葉からリンクするやり方が書いてないので困ってます。 学校の宿題で出て困ってます。どなたか・お教えください。
- ベストアンサー
- Mac
- スワップイメージ＋リンクの変更
まったくの素人ですが、お教えください。 以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。 <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table> a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、 hoge.jpgを大きなメインの画面にしたいと思っています。 このとき、abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされ、かつそれぞれの項目のリンク(a.html/b.html/c.html)がhoge.htmlと置き換わるようなjavascriptを作りたいと考えています。 イメージのスワップだけならいくつも見つけることができたのですが、イメージとリンクが両方ともスワップされるようなものを、見つけることができませんでした。もしそのようなjavascriptがweb上にありましたら、お教えください。
- ベストアンサー
- JavaScript
- HTMLのリンクアンカーがおかしい？？？
開発中にふと気が付いたことなのですが、以下のソースをブラウザ（IE5.0）で表示すると、aaaだけ、TABLE内のアンカーの左右でもリンクするようになってしまうのですが、なぜなのでしょうか？？？ <html> <head></head> <body> <table border=0 cellpadding=3 width=730> <tr><td align=center><a href="help_10.asp" target="right"><h2>aaa</h2></a></td></tr> <tr><td align=center><a href="help_20.asp" target="right"><h2>bbb</h2></a></td></tr> <tr><td align=center><a href="help_35.asp" target="right"><h2>ccc</h2></a></td></tr> </table> </body> <html>
- ベストアンサー
- その他(ソフトウェア)
- onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- 今、HTMLメルマガを作成し、テスト配信等々をいろいろと試しているので
今、HTMLメルマガを作成し、テスト配信等々をいろいろと試しているのですが、どうもoutlook2007だけエラーが発生します。どなたか解決策が分かる方いらっしゃいましたら、ご教授願えないでしょうか？ ■発生するエラー HTML内の一部のテキストリンクがクリックできない。 画像に貼ったリンクはクリックできる。 全て同じレイアウトで記載しているため、エラーが発生していない箇所（正常にクリックできる）のHTMLソースをエラーが発生しているHTMLのソースに上書きしてもテキストリンクはクリック出来ない。 ■エラー発生の原因 いろいろと調べていくと、HTMLソースは全て、TABLEコーディングを使用しており、TABLEの中にTABLEを記載しているような状態です。その、階層が深くないとテキストリンクは正常にクリックでき、階層が深いとクリックできなくなります。 階層を浅くすると正常になるのですが、背景色などの関係で、これ以上、浅くは出来ない状態です。 ------------------------------------------ （例）階層が浅い例 <table> <tr> <td><table> <tr> <td>あああ</td> </tr> </table></td> </tr> </table> （例）階層が深い例 <table> <tr> <td><table> <tr> <td><table> <tr> <td><table> <tr> <td><table> <tr> <td>あああ</td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> ------------------------------------------ 以上が発生をしているエラーですが、どなたか、階層が深い状態でも 全てのテキストリンクがクリックできる方法はないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- 条件にあったテーブルのセルを数える
テーブルを作り、それぞれのセルをonmouseoverすると背景が変わるようになっています。そして、背景が変わった後に、何個のセルの背景が変わったのかを知りたいのですが、どうもうまくいきません。alertで確認してもいつも「０」として出てきます。お手数ですが、ご指導お願いします。 <script type="text/javascript"> function bgSwap(TD) { if(window.event.shiftKey == true) { if(TD.style && TD.style.backgroundColor){ TD.style.backgroundColor = ''; } else{ TD.style.backgroundColor = '#000000'; } } } function sendToparent(){ var count=0; var i; var tdname = document.getElementById('F1table').getElementsByTagName('td'); for (i=0; i < tdname.length; i++) { if(tdname[i].style.backgroundColor == "#000000"){ count = count+1; }else { count = count; } } alert(count); } </script> <body> <input type='button' value='set' onclick='sendToparent()'> <table id='F1table' border="0" bordercolor = '#000000' > <tr> <td onmouseover="bgSwap(this)" width="35" height="35"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> <td onmouseover="bgSwap(this)" width="30" height="30"></td> </tr> </table> </body>
- 締切済み
- JavaScript
お礼
回答ありがとうございます。 javaですか。 javaはよく分かってませんが、提示していただいたのは簡単そうなので、やってみます。私もビルダーは基本的には使っていないんですが、文法チェックをしようと使ったところエラーが発見されました。