Q&A
前提・実現したいこと
HTMLを用いて，ラジオボタンによるアンケート票を作成しようとしております。
発生している問題・エラーメッセージ
各質問項目とラジオボタンは表にしたいのですが，
4つ目以降の質問項目（5・6）は表の外に出てしまっております。
該当のソースコード
HTML
1<html> 2<head> 3<script type="text/javascript"> var submitted = false; </script> 4<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.close();window.open('https://sites.google.com/view/form-sample/thanks');}"></iframe> 5<!-- スタイルシート --> 6<style> 7 .vertical { 8 text-align: left; 9 writing-mode: vertical-rl; 10 } 11 .dot { 12 text-align: center; 13 } 14 .bottom { 15 font-family: Yu Gothic; 16 text-align: left; 17 vertical-align: bottom; 18 font-style: italic; 19 } 20 21</style> 22</head> 23<body> 24<!-- フォーム部分 --> 25<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfPAoXdMTf9Qm1tYMICPFZwYzTOWpOK1DbIoUvYxZOl9WZsQA/formResponse"> 26<div align="center"> 27<table> 28 <tr> 29 <td colspan="9">次の文章は、今この時にあなたがどういう気持ちかを示しています。<p>あなたの現在の気持ちを表す文として、どの程度あてはまるのかをそれぞれ回答してください。</p>以下の1から7の段階で、たった今、どう感じるかをもっともよく表している数字に〇をつけてください</td> 30 </tr> 31 <tr> 32 <table border=1> 33 <tr> 34 <th class="bottom" colspan="2">今この瞬間・・・</th> 35 <th class="vertical">１．全く当てはまらない</th> 36 <th class="dot">…</th> 37 <th class="dot">…</th> 38 <th class="vertical">４．どちらとも言えない</th> 39 <th class="dot">…</th> 40 <th class="dot">…</th> 41 <th class="vertical">７．非常にあてはまる</th> 42 </tr> 43 <tr> 44 <td>１）</td> 45 <td>誰かに私のことを本当に愛していると言ってもらえたらいいのにと思う</td> 46 <td><input type="radio" name="entry.983918731" value="1"></td> 47 <td><input type="radio" name="entry.983918731" value="2"></td> 48 <td><input type="radio" name="entry.983918731" value="3"></td> 49 <td><input type="radio" name="entry.983918731" value="4"required></td> 50 <td><input type="radio" name="entry.983918731" value="5"></td> 51 <td><input type="radio" name="entry.983918731" value="6"></td> 52 <td><input type="radio" name="entry.983918731" value="7"></td> 53 </tr> 54 <tr> 55 <td>２）</td> 56 <td>親友や恋人（あるいは配偶者）に親しくされると、私は心地良くないだろう</td> 57 <td><input type="radio" name="entry.1633806150" value="1"></td> 58 <td><input type="radio" name="entry.1633806150" value="2"></td> 59 <td><input type="radio" name="entry.1633806150" value="3"></td> 60 <td><input type="radio" name="entry.1633806150" value="4"required></td> 61 <td><input type="radio" name="entry.1633806150" value="5"></td> 62 <td><input type="radio" name="entry.1633806150" value="6"></td> 63 <td><input type="radio" name="entry.1633806150" value="7"></td> 64 </tr> 65 <tr> 66 <td>３）</td> 67 <td>独りぼっちだと感じるが、他者と親しくしたいとは感じない</td> 68 <td><input type="radio" name="entry.355393434" value="1"></td> 69 <td><input type="radio" name="entry.355393434" value="2"></td> 70 <td><input type="radio" name="entry.355393434" value="3"></td> 71 <td><input type="radio" name="entry.355393434" value="4"required></td> 72 <td><input type="radio" name="entry.355393434" value="5"></td> 73 <td><input type="radio" name="entry.355393434" value="6"></td> 74 <td><input type="radio" name="entry.355393434" value="7"></td> 75 </tr> 76 <tr> 77 <td>４）</td> 78 <td>愛されていると感じる</td> 79 <td><input type="radio" name="entry.40947236" value="1"></td> 80 <td><input type="radio" name="entry.40947236" value="2"></td> 81 <td><input type="radio" name="entry.40947236" value="3"></td> 82 <td><input type="radio" name="entry.40947236" value="4"required></td> 83 <td><input type="radio" name="entry.40947236" value="5"></td> 84 <td><input type="radio" name="entry.40947236" value="6"></td> 85 <td><input type="radio" name="entry.40947236" value="7"></td> 86 </table> 87 </tr> 88 <tr> 89 <td>5）</td> 90 <td>親しい誰かが今、私と会ってくれたらいいのにと思う。</td> 91 <td><input type="radio" name="entry.920389213" value="1"></td> 92 <td><input type="radio" name="entry.920389213" value="2"></td> 93 <td><input type="radio" name="entry.920389213" value="3"></td> 94 <td><input type="radio" name="entry.920389213" value="4"required></td> 95 <td><input type="radio" name="entry.920389213" value="5"></td> 96 <td><input type="radio" name="entry.920389213" value="6"></td> 97 <td><input type="radio" name="entry.920389213" value="7"></td> 98 </table> 99 </tr> 100 <tr> 101 <td>6）</td> 102 <td>今、何かうまくいかなくても、誰かを頼ることができると感じる</td> 103 <td><input type="radio" name="entry.1283727335" value="1"></td> 104 <td><input type="radio" name="entry.1283727335" value="2"></td> 105 <td><input type="radio" name="entry.1283727335" value="3"></td> 106 <td><input type="radio" name="entry.1283727335" value="4"required></td> 107 <td><input type="radio" name="entry.1283727335" value="5"></td> 108 <td><input type="radio" name="entry.1283727335" value="6"></td> 109 <td><input type="radio" name="entry.1283727335" value="7"></td> 110 </table> 111 </tr> 112</table> 113<button type="submit" name="button" value="送信">送信</button> 114</div> 115</form> 116</body>
すべての項目が表のなかにおさまった綺麗な状態にしたいと考えております。
初歩的な内容かもしれませんが，初心者ですのでどなたかがお教えくださると幸いです。
回答1件
0
tableとtrの開始タグと終了タグの対応や記述位置がいろいろおかしいです。
それらを修正すると下記のようになります。
html
1<html> 2<head> 3 <script type="text/javascript"> var submitted = false;</script> 4 <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" 5 onload="if(submitted) {window.close();window.open('https://sites.google.com/view/form-sample/thanks');}"></iframe> 6 <!-- スタイルシート --> 7 <style> 8 .vertical { 9 text-align: left; 10 writing-mode: vertical-rl; 11 } 12 13 .dot { 14 text-align: center; 15 } 16 17 .bottom { 18 font-family: Yu Gothic; 19 text-align: left; 20 vertical-align: bottom; 21 font-style: italic; 22 } 23 </style> 24</head> 25 26<body> 27 <!-- フォーム部分 --> 28 <form 29 action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfPAoXdMTf9Qm1tYMICPFZwYzTOWpOK1DbIoUvYxZOl9WZsQA/formResponse"> 30 <div align="center"> 31 <table border=1> 32 <tr> 33 <td colspan="9">次の文章は、今この時にあなたがどういう気持ちかを示しています。<p>あなたの現在の気持ちを表す文として、どの程度あてはまるのかをそれぞれ回答してください。</p> 34 以下の1から7の段階で、たった今、どう感じるかをもっともよく表している数字に〇をつけてください</td> 35 </tr> 36 <tr> 37 <th class="bottom" colspan="2">今この瞬間・・・</th> 38 <th class="vertical">１．全く当てはまらない</th> 39 <th class="dot">…</th> 40 <th class="dot">…</th> 41 <th class="vertical">４．どちらとも言えない</th> 42 <th class="dot">…</th> 43 <th class="dot">…</th> 44 <th class="vertical">７．非常にあてはまる</th> 45 </tr> 46 <tr> 47 <td>１）</td> 48 <td>誰かに私のことを本当に愛していると言ってもらえたらいいのにと思う</td> 49 <td><input type="radio" name="entry.983918731" value="1"></td> 50 <td><input type="radio" name="entry.983918731" value="2"></td> 51 <td><input type="radio" name="entry.983918731" value="3"></td> 52 <td><input type="radio" name="entry.983918731" value="4" required></td> 53 <td><input type="radio" name="entry.983918731" value="5"></td> 54 <td><input type="radio" name="entry.983918731" value="6"></td> 55 <td><input type="radio" name="entry.983918731" value="7"></td> 56 </tr> 57 <tr> 58 <td>２）</td> 59 <td>親友や恋人（あるいは配偶者）に親しくされると、私は心地良くないだろう</td> 60 <td><input type="radio" name="entry.1633806150" value="1"></td> 61 <td><input type="radio" name="entry.1633806150" value="2"></td> 62 <td><input type="radio" name="entry.1633806150" value="3"></td> 63 <td><input type="radio" name="entry.1633806150" value="4" required></td> 64 <td><input type="radio" name="entry.1633806150" value="5"></td> 65 <td><input type="radio" name="entry.1633806150" value="6"></td> 66 <td><input type="radio" name="entry.1633806150" value="7"></td> 67 </tr> 68 <tr> 69 <td>３）</td> 70 <td>独りぼっちだと感じるが、他者と親しくしたいとは感じない</td> 71 <td><input type="radio" name="entry.355393434" value="1"></td> 72 <td><input type="radio" name="entry.355393434" value="2"></td> 73 <td><input type="radio" name="entry.355393434" value="3"></td> 74 <td><input type="radio" name="entry.355393434" value="4" required></td> 75 <td><input type="radio" name="entry.355393434" value="5"></td> 76 <td><input type="radio" name="entry.355393434" value="6"></td> 77 <td><input type="radio" name="entry.355393434" value="7"></td> 78 </tr> 79 <tr> 80 <td>４）</td> 81 <td>愛されていると感じる</td> 82 <td><input type="radio" name="entry.40947236" value="1"></td> 83 <td><input type="radio" name="entry.40947236" value="2"></td> 84 <td><input type="radio" name="entry.40947236" value="3"></td> 85 <td><input type="radio" name="entry.40947236" value="4" required></td> 86 <td><input type="radio" name="entry.40947236" value="5"></td> 87 <td><input type="radio" name="entry.40947236" value="6"></td> 88 <td><input type="radio" name="entry.40947236" value="7"></td> 89 90 </tr> 91 <tr> 92 <td>5）</td> 93 <td>親しい誰かが今、私と会ってくれたらいいのにと思う。</td> 94 <td><input type="radio" name="entry.920389213" value="1"></td> 95 <td><input type="radio" name="entry.920389213" value="2"></td> 96 <td><input type="radio" name="entry.920389213" value="3"></td> 97 <td><input type="radio" name="entry.920389213" value="4" required></td> 98 <td><input type="radio" name="entry.920389213" value="5"></td> 99 <td><input type="radio" name="entry.920389213" value="6"></td> 100 <td><input type="radio" name="entry.920389213" value="7"></td> 101 </tr> 102 <tr> 103 <td>6）</td> 104 <td>今、何かうまくいかなくても、誰かを頼ることができると感じる</td> 105 <td><input type="radio" name="entry.1283727335" value="1"></td> 106 <td><input type="radio" name="entry.1283727335" value="2"></td> 107 <td><input type="radio" name="entry.1283727335" value="3"></td> 108 <td><input type="radio" name="entry.1283727335" value="4" required></td> 109 <td><input type="radio" name="entry.1283727335" value="5"></td> 110 <td><input type="radio" name="entry.1283727335" value="6"></td> 111 <td><input type="radio" name="entry.1283727335" value="7"></td> 112 </tr> 113 </table> 114 <button type="submit" name="button" value="送信">送信</button> 115 </div> 116 </form> 117</body> 118
投稿2021/12/08 17:47
編集2021/12/08 17:48
総合スコア34084
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。