PCプログラミング勉強始めました。メモ帳に入力するとIEでは枠が表示されない問題の解決方法を教えてください。

このQ&Aのポイント
  • PCプログラミング勉強中の方へ。メモ帳に入力するとInternet Explorerでは枠が表示されないという問題が発生しました。この問題の解決方法を教えてください。
  • PCプログラミング初心者の方へ。メモ帳にコードを入力するとInternet Explorerでは枠が表示されません。この問題を解決する方法をご紹介します。
  • メモ帳にコードを入力するとInternet Explorerでは枠が表示されないという問題があります。この問題の解決策をお探しの方へ、解決方法をご紹介します。
回答を見る
  • ベストアンサー

PCプログラミング勉強始めました。

メモ帳に <metahttp-equiv="Content-Type"content="text/html;charet=utf8"/> <style type="text/css"> table{ border-collapse:collapse; } tabletd { width:20px; height:20px; border:1pxsolidblack; } </style> <scripttype="text/javascript"> window.onload=function(){ varhtml=['<table>'] html.push'<tr>') for(vari=0;i<<10;i++)html.push('<td></td>') html.push('<tr>') html.push('</table>') document.getElementByld('view7).innerHTML=html.join('') } </script> <devid="view"></div> <table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table> と入力するとIEでは window.onload=function(){ varhtml=[''] html.push'') for(vari=0;i<<10;i++)html.push('') html.push('') html.push(' ') document.getElementByld('view7).innerHTML=html.join('') } と表示されます。 本には枠が表示されるとあるのですがうまくいきません。 解決をお願いします。

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 >何度もすみません。 という気持ちがあるなら、先の回答のとおり”しっかりと”見比べてください。 <meta http-equiv="Content-Type"content="text/html;charset=utf-8"/> <style type="etxt/css">■ etxt/css?? table{ border-collapse; ■ border-collapseをどうしたいの? border-collapse:collapse;とかじゃない? } table td{ width:20px; height:20px; border:1px solid black; } </style> <script type-"text/javascript">■ type=でしょ? ■ここの中身はなくなったの? </script> <table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table> 大変申し訳ございませんが、きちんと確認してみてください。 でないと、解決は難しいです。

その他の回答 (2)

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.3

この程度の問題をこんなにひっぱるようではこの先非常に厳しいですよ 丸1日くらいは粘って試行錯誤する根性と思考力をつけてください

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 試してないですが <scripttype="text/javascript"> ではなくて <script type="text/javascript"> が正しいです。 varhtml=['<table>'] も var html=['<table>'] よく見たらいたるところで半角スペースが抜けてますので本と比較してよく確認して下さい。 JavaScriptに限らずhtml、スタイルシートも。

yoko1990
質問者

お礼

ありがとうございました。精進いたします。

yoko1990
質問者

補足

何度もすみません。 下記でためしたのですが、何も表示されません。 解決をよろしくお願いします。 <meta http-equiv="Content-Type"content="text/html;charset=utf-8"/> <style type="etxt/css"> table{ border-collapse; } table td{ width:20px; height:20px; border:1px solid black; } </style> <script type-"text/javascript"> </script> <table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table>

関連するQ&A

  • テーブル入れ子した時の、テーブル外枠罫線を非表示にしたい

    下記のように、入れ子にしたテーブルを作成しましたが、「AA, BB, 10, 20」のテーブル外枠線が太くなってしまいます。全て細い線で表示させるには、入れ子にしたテーブル外枠罫線を非表示にすれば良いのかなと思うのですが、どうすればよろしいでしょうか? また他によい方法があればアドバイスお願いします。 条件として、 (1)入れ子でテーブルを作成 (2)教えて!gooのように細い線を使用 です。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE TYPE="text/css"> <!-- TABLE { margin: 0px; border: 1px solid #ff0000; border-collapse: collapse; } TD { padding: 0px; border-style: solid; } --> </STYLE> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD>みかん</TD> <TD>バナナ</TD> <TD>パイン</TD> </TR> <TR> <TD>やさい</TD> <TD> <TABLE width="100%" border="1"> <TBODY> <TR> <TD>AA</TD> <TD>BB</TD> </TR> <TR> <TD>10</TD> <TD>20</TD> </TR> </TBODY> </TABLE> </TD> <TD>りんご</TD> </TR> <TR> <TD>いちご</TD> <TD>すいか</TD> <TD>れもん</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  • 特定のテーブルにだけ任意の書式を適用するHTMLかCSS

    特定のテーブルにだけ任意の書式を適用するHTMLかCSS 以下のHTMLテーブルで、入れ子テーブル(区画1~区画4)には罫線なし、 外枠(田の字)だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか? 【解決案1】こうすると、入れ子テーブル(区画1~区画4)まで罫線が現れてしまいます。 table,td,th {border-collapse: collapse; border: 1px solid #000;} 【解決案2】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。 table {border-collapse: collapse; border: 1px solid #000;} .tdstyle {border: 1px solid #000;} 【解決案3】外枠(田の字)だけ、以下のようにしたいですが、bordercolorってIEのみ有効なタグですよね? <table border="1" style="border-collapse: collapse" bordercolor="#111111"> 外枠(田の字)だけに、IDをつけたり識別して、効率よく処理できませんか? <html> <head> <style TYPE="text/css"> <!-- --> </style> </head> <body>   <table cellpadding=10>     <tr>       <td>         <table cellpadding=10><tr><td>区画1</td></tr></table>       </td>       <td>         <table cellpadding=10><tr><td>区画2</td></tr></table>       </td>     </tr>     <tr>       <td>         <table cellpadding=10><tr><td>区画3</td></tr></table>       </td>       <td>         <table cellpadding=10><tr><td>区画4</td></tr></table>       </td>     </tr>   </table> </body> </html>

    • ベストアンサー
    • HTML
  • IEとネスケの表示の違いを直したい

    下記のように ページ上部、左端ともに隙間を空けずテーブルを組んだつもりなのですが、 IEではピッタリとくっつくのに、Netscapeで見ると、5pxくらい間があいてしまいます。 どこを直したらいいのでしょうか。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>ページ</TITLE> </HEAD> <BODY topmargin="0" leftmargin="0"> <TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" bgcolor="#000000"> <TR> <TD width="100%"> </TD> </TR> </TABLE> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • IEにおけるinnerHTMLの記述ミス?

    ┌───┬───┐ │1行目 │     │ ├───┤     │ │2行目 │ボタン │ ├───┤     │ │3行目 │     │ └───┴───┘ というテーブルで、ボタンを押すごとに2行目が表示、非表示と切り替わるように、下のようなソースを書きました。 IE以外ではうまく行くのですが、IEだと 一回目の押下ではうまく行くのですが、その後が動きません。 ちなみに 最初の押下でエラーの警告がでています。 innerHTMLの記述を消したらそれは無くなりました、、、。 IE以外のブラウザでは上手く行くのですが、 IEではどこがダメなのでしょうか。 基本的なことで申し訳ありませんが、よろしくお願いします。 -------------------------------------------------------------- <script type="text/javascript"> function del() { document.getElementById('row2').style.display="none"; document.getElementById('row1').innerHTML= '<td>1行目</td>'+ '<td rowspan="2"><input type="button" value="2行目を表示" onclick="add()" /></td>' } function add() { userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf("msie") > -1) { document.getElementById('row2').style.display="display"; } else { document.getElementById('row2').style.display="table-row"; } document.getElementById('row1').innerHTML= '<td>1行目</td>'+ '<td rowspan="3"><input type="button" value="2行目を非表示" onclick="del()" /></td>' } </script> <style type="text/css"> table { border-collapse:collapse; } td { border:1px solid #ccc; } </style> <table> <tr id="row1"> <td>1行目</td> <td rowspan="3"><input type="button" value="2行目を非表示" onclick="del()" /></td> </tr> <tr id="row2"> <td>2行目</td> </tr> <tr> <td>3行目</td> </tr> </table>

  • DOCTYPEをStrictにするとtdに余白が表示される

    こんにちは。 下記の様なhtmlを組み、枠を表示させてようとしているのですが、 DOCTYPEをStrictにすると、tdの上下に余白が表示されうまくいきません。 枠の画像を上下左右の4つに分解し、ブラウザ上で合体させようとしています。 どうしてもStrictで組みたいのですが、Strictでは無理なのでしょうか? ★html★ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" charset="UTF-8" /> </head> <body> <table> <tr> <td colspan=3><img src="waku-top.jpg" /></td> </tr> <tr> <td><img src="waku-left.jpg" /></td> <td width=357px></td> <td><img src="waku-right.jpg" /></td> </tr> <tr> <td colspan=3><img src="waku-bottom.jpg" /></td> </tr> </table> </body> </html> ★css★ table{border:0;border-collapse:collapse;} tr,td{padding:0;} よろしくお願いします。

    • ベストアンサー
    • HTML
  • IEでfor()が機能しないのはなぜ?解決方法は?

    下記プログラムでは、 ボタンを押すとカウントダウンが開始され、 0になったときに、table内の100x100の画像4枚を 一気に1枚の244x244の画像と切り替えるというものです。 Firefoxではカウントダウンが実行された後に、 画像が切り替わるのですが、 IEではカウントダウンが実行されずに 画像が切り替わってしまいます。 特にエラーメッセージは出ません。 IEでもちゃんとカウントダウンをさせた後に 画像の切換えをしたいのですが、どうすればいいのでしょうか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> <!-- #xxx{ position: absolute; top: 110px; left: 50px; } table{ border-spacing:0; border-collapse:collapse; } td{ border:1px solid #000; padding:10px; width:100px; height:100px; } //--> </style> <script language="JavaScript"> <!-- function start(){ document.mF.ttt.value = "まだ切換えていません"; } function kirikae(){ for(var i=5; 0<=i; i--){ alert(i);  //カウントダウン if(i==0){  //カウントダウンが0になったら xxx.innerHTML = '<img src="r.gif" width="244" height="244">'; //画像切換え document.mF.ttt.value = "切換えました"; } } } //--> </script> </head> <body onload="start()"> <form name="mF"> <div id="xxx"> <table> <tr> <td><img src="1.jpg" width="100" height="100"></td> <td><img src="2.jpg" width="100" height="100"></td> </tr> <tr> <td><img src="3.jpg" width="100" height="100"></td> <td><img src="4.jpg" width="100" height="100"></td> </tr> </table> </div> <input type="button" value="全画像の切換え" onclick="kirikae()"> <input type="text" name="ttt"> </form> </body> </html>

  • 入れ子にしたテーブルの罫線について

    htmlとcssを学習し始めた者です。 下記のような表を作りましたが 罫線が2重になってしまいます。 この罫線をダブらないようにしたいのです。 一番左の列で言えば、外枠を残し、100の上、左、右 を消し、200の左右を消し、300の左、右、下を消し 一本の線で書かれた表にしたいと考えています。 ご教示くださるようお願いいたします。 <LINK href="style.css" type="text/css" rel="stylesheet"> <table> <tr> <td> <table> <tr><td>100</td></tr> <tr><td>200</td></tr> <tr><td>300</td></tr> </table> </td> <td> <table> <tr><td>101</td></tr> <tr><td>201</td></tr> <tr><td>301</td></tr> <tr><td>401</td></tr> <tr><td>501</td></tr> </table> </td> <td>12345<br>67890 </td> <td> <table> <tr><td>102</td></tr> <tr><td>202</td></tr> <tr><td>302</td></tr> <tr><td>402</td></tr> </table> </td> </tr> </table> style.css table{ border-collapse: collapse; border: 1px solid #000000; line-height:130%; margin:auto; border-spacing:0; } td{ border: 1px solid #000000; padding:5px;}

    • ベストアンサー
    • HTML
  • 列もハイライト

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ハイライト(JavaScript)</title> </head> <body> <script type="text/javascript"> <!-- function hightlight(target, color){ target.style.backgroundColor = color; } //--> </script> <table border="1" style="border-collapse:collapse"> <tr><th>氏名</th><th>日付</th></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒1</td><td>2005/04/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒2</td><td>2004/02/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒3</td><td>2004/10/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒4</td><td>2004/08/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒5</td><td>2005/06/01</td> </table> </body> </html> で行にハイライトを設定しているのですが、同時に列にも同じようにハイライトを設定したいと思っております。 どのように変更したらよいでしょうか? ご存知の方、宜しくお願いします。

  • テーブルの枠線

    IEブラウザのバージョンにより、表示が変わることはわかっているのですが どうしても解決できないので質問させていただきます。 対応ブラウザがIE8からIE11という前提なので、まずはIE8で試してみました。 きれいに表示できました。 が、IE11で表示したら、見出しは枠線が表示されました。 でも、中の罫線が表示されません。(画像添付) IE9、IE10はソフトを入れ直しが必要なので、また未確認です。 <meta>タグを入れてもダメでした。(IE=edge) IE8を捨ててもよいので、IE11で枠線を表示させるにはどうしたらよいのか、 ご教授願えないでしょうか? widthの指定もしているし、border-styleも記述しているつもりですが IE11では何が足りないのか、わかりません。 以下にソースコードを記載しますので よろしくお願いいたします。 ※まだdebug中なので、罫線以外につきましては無視願います。 <html> <head> <style type="text/css"> #midashi { border:2px solid #ffffff; border-collapse:collapse; } #table1 { border:2px solid #3d9f51; border-collapse:collapse; } #table0 { border:2px solid #83ca51; border-collapse:collapse; float:left; margin-right:-3px; } #table1 .td0{ width:15px; height:20px; border: none; text-align:left; font-size:80%; } #table1 .td1{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "dotted"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "solid"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2bg{ background-color:#83ca51; } #table0 .td3{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#83ca51; border-collapse:collapse; text-align:center; font-size:80%; } #table0 .td3non{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#ffffff; border-collapse:collapse; text-align:center; font-size:80%; } </style> </head> <body> <table id="table0"> <script type="text/javascript"> //**************************************************************************** //--- 番号 for(i=0; i<9; i++){ document.write('<tr>'); if( i == 0){ document.write('<td class="td3non"> </td>') }else{ document.write('<td class="td3">部屋' + i + '</td>') } document.write('</tr>'); } //--- //**************************************************************************** </script> </table> <table id="table1"> <script type="text/javascript"> //**************************************************************************** //--- 見出し document.write('<tr>'); for(j=0; j<48; j++){ // 30分単位の一日分 if( j%2 == 1){ document.write('<td class="td2 td2bg"></td>') // 時間表示無し }else{ document.write('<td class="td0 td2bg">' + (j/2) + '</td>') // 時間表示有り } } document.write('</tr>'); //--- //**************************************************************************** //**************************************************************************** //--- 時間テーブル for(i=0; i<8; i++){ // i:部屋の数 document.write('<tr>'); for(j=0; j<45; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2"></td>') // solid }else{ document.write('<td class="td1"></td>') // dotted } } for(j=0; j<3; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2" style="font-size:50%;text-align:center;">・</td>') // solid }else{ document.write('<td class="td1" style="font-size:50%;text-align:center;">・</td>') // dotted } } document.write('</tr>'); //--- //**************************************************************************** } </script> </table> </body> </html>

    • ベストアンサー
    • CSS
  • テーブル・セル枠線の色

    下記のようにテーブルを組むと、IEでは1pxの赤いボーダーで表示されるのですが、 ネスケだとグレーの太い線になってしまいます。 どのように変えたらよいのでしょうか。 <TABLE border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF5F8D" width="100%"> <TR> <TD width="50%"> </TD> <TD width="50%"> </TD> </TR> </TABLE>

    • ベストアンサー
    • HTML

専門家に質問してみよう