テーブルの中のHTMLの表示方法について教えてください。

Question

meichi

305

278もっと見る

200pt

ウェブ制作

テーブルの中のHTMLの表示方法について教えてください。

よろしくお願いします。
以下にソースをご提示させていただきますので、ご教示方よろしくお願いします。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Shift_JIS"
http-equiv="Content-Type">
<title>あいうえお</title>
</head>
<body>
<table cellspacing="0" height="499" border="0" cellpadding="0"
width="857">
<tbody>
<tr>
<td colspan="2" rowspan="1" bgcolor="#ffffff" valign="top">カキクケコ<br>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top">・ABC<br>
</td>
<td bgcolor="#ffffff" valign="top">ふだんはこのテーブルの中はこの文字で<br>
左側のテーブルの中のABCのリンクを<br>
クリックしたらこの右下のテーブル（このテーブル）の<br>
中だけにABCのリンクの中を<br>
新しいHTMLで表示したい<br>
</td>
</tr>
</tbody>
</table>

回答の条件

1人5回まで

登録：2013/04/14 09:57:57
終了：2013/04/14 20:57:42

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

質問者から

meichi2013/04/14 11:36:52

すいません、質問のイメージがよくわかりにくいかもしれませんが、

下記のようなイメージのホームページをつくりたいのです。よろしく

お願いします。m(_ _)m　そもそも私がテーブルの構成でつくろうと

しているのが　無理があるかもしれませんが、

ご教示方よろしくお願いします。

http://www.mai-hidaka.com/

規約違反として通知

質問者から

meichi2013/04/15 05:51:29

すいません、今帰ってきました。コメントありがとうございます。m(_ _)m

>ちなみに、左側をつついた後に、右側に表示される内容は、どこに書きますか？

>この HTML の中？　それとも、別の HTML でしょうか。

↑おっしゃるとおり、左側のつつくところは、複数予定しています。

内容は、このHTMLの中にするつもりです。今日は　ちょっと無理

なのですが　作業をすすめてみます。ありがとうございました。

これで　質問を終了します。

規約違反として通知

コメントはまだありません

人力検索はてな http://q.hatena.ne.jp/1365901077 のつづ.. 2013-04-20 14:32:46
人力検索はてな「ホームページ作成」javaスクリプト実行の.. 2013-04-20 17:36:33

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2013-04-14T10:47:41+09:00

質問にある HTML のソースをなるべくそのまま使ってみました。

リンクを A タグにして、target なんかを入れた
リンク先を表示する TD に id をつけた
リンク先を表示する TD をスタイルで大きさ（幅、高さ）を指定した
jQuery を使います
TABLE に border="1" を指定した（実際に使うときは、消してください）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Shift_JIS"
http-equiv="Content-Type">
<title>あいうえお</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
    $("#anchor").click(function() {
        var s = "<iframe name='display' class='display'></iframe>";
        $("#area").html(s);
    });
});
</script>
<style>
#area {
    width: 90%;
    height: 85%;
}
.display {
    width: 100%;
    height: 100%;
    border: 0;
}
</style>
</head>
<body>
<table cellspacing="0" height="499" border="1" cellpadding="0"
width="857">
<tbody>
<tr>
<td colspan="2" rowspan="1" bgcolor="#ffffff" valign="top">カキクケコ<br>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top">・<a href="http://www.yahoo.co.jp/" target="display" id="anchor">ABC</a><br>
</td>
<td bgcolor="#ffffff" valign="top" id="area">ふだんはこのテーブルの中はこの文字で<br>
左側のテーブルの中のABCのリンクを<br>
クリックしたらこの右下のテーブル（このテーブル）の<br>
中だけにABCのリンクの中を<br>
新しいHTMLで表示したい<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

これと、ほぼ同じコードを jsFiddle で書いてみましたので、動きを確認してみてください。
http://jsfiddle.net/a_kuma3/xjV3U/embedded/result/

a-kuma3 · Accepted Answer · 2013-04-14T10:47:41+09:00

質問にある HTML のソースをなるべくそのまま使ってみました。

リンクを A タグにして、target なんかを入れた
リンク先を表示する TD に id をつけた
リンク先を表示する TD をスタイルで大きさ（幅、高さ）を指定した
jQuery を使います
TABLE に border="1" を指定した（実際に使うときは、消してください）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Shift_JIS"
http-equiv="Content-Type">
<title>あいうえお</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
    $("#anchor").click(function() {
        var s = "<iframe name='display' class='display'></iframe>";
        $("#area").html(s);
    });
});
</script>
<style>
#area {
    width: 90%;
    height: 85%;
}
.display {
    width: 100%;
    height: 100%;
    border: 0;
}
</style>
</head>
<body>
<table cellspacing="0" height="499" border="1" cellpadding="0"
width="857">
<tbody>
<tr>
<td colspan="2" rowspan="1" bgcolor="#ffffff" valign="top">カキクケコ<br>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top">・<a href="http://www.yahoo.co.jp/" target="display" id="anchor">ABC</a><br>
</td>
<td bgcolor="#ffffff" valign="top" id="area">ふだんはこのテーブルの中はこの文字で<br>
左側のテーブルの中のABCのリンクを<br>
クリックしたらこの右下のテーブル（このテーブル）の<br>
中だけにABCのリンクの中を<br>
新しいHTMLで表示したい<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

これと、ほぼ同じコードを jsFiddle で書いてみましたので、動きを確認してみてください。
http://jsfiddle.net/a_kuma3/xjV3U/embedded/result/

テーブルの中のHTMLの表示方法について教えてください。

質問者から

ベストアンサー

a-kuma3496821512013/04/14 10:47:41

その他の回答（0件）

a-kuma3496821512013/04/14 10:47:41ここでベストアンサー

質問者から

コメント（0件)

この質問への反応（ブックマークコメント）

トラックバック