0

私はこのHTMLコードを持っています:

<html>
    <head>
        <script type="text/javascript">
            function showStuff(id) {
                var e = document.getElementById(id);
                if (e.style.display == 'block') e.style.display = 'none';
                else e.style.display = 'block';
            }
        </script>
    </head>
    <body>
        <FORM name=myForm>
            <TABLE border=0 align=center>
                <TBODY>
                    <TR>
                        <TD align=right>Quiz/Test Title:</TD>
                        <TD align=left>
                            <INPUT size=25 type=text name=t>
                        </TD>
                    </TR>
                    <TR>
                        <TD align=right>
                            <input type="button" value="Show/Hide" onclick="showStuff('multiplechoice')">
                        </TD>
                    </TR>
                </TBODY>
                <TBODY id="multiplechoice" style="display: none;" align=center>
                    <TR>
                        <TD align=right>
                            <h3>Multiple Choice</h3>
                        </TD>
                        </TD>
                        <TR>
                            <TD align=right>Section Name:</TD>
                            <TD align=left>
                                <INPUT size=20 type=text name=section1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Directions:</TD>
                            <TD align=left>
                                <INPUT size=71 type=text name=directions1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Question Number:</TD>
                            <TD align=left>
                                <INPUT size=2 type=text name=n1 id=n1 value=1 onkeypress="return alpha(event,numbers)">
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Question:</TD>
                            <TD align=left>
                                <textarea rows=2 cols=55 name=q1 id=q1></textarea>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Answer A:</TD>
                            <TD align=left>
                                <INPUT size=35 type=text name=a1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Answer B:</TD>
                            <TD align=left>
                                <INPUT size=35 type=text name=b1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Answer C:</TD>
                            <TD align=left>
                                <INPUT size=35 type=text name=c1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Answer D:</TD>
                            <TD align=left>
                                <INPUT size=35 type=text name=d1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Answer (A,B,C,D):</TD>
                            <TD align=left>
                                <INPUT size=1 type=text name=correct1 onkeyup="upper(this)" onkeypress="return alpha(event,letters)" maxlength="1">
                            </TD>
                        </TR>
                </TBODY>
            </TABLE>
        </FORM>
    </body>
</html>

問題は、表示/非表示をクリックするとフォームが表示されますが、フォーム内のすべてが左に移動することです。すべてを中央に揃えて配置したいと思います。とにかくこれを行うことはありますか？他のすべてにリンクしている他のすべての機能を省略したので、すべてが機能することを心配しないでください。どんな助けでも大歓迎です。

4

1 に答える 1

1

2人TBodyを別々のテーブルに置いてみませんか?

以下のようなもの：

<FORM name=myForm>
<TABLE border=0 align=center>
    <TBODY>
         <TR>
             <TD align=right>Quiz/Test Title:</TD>
             <TD align=left>
                <INPUT size=25 type=text name=t>
            </TD>
        </TR>
        <TR>
             <TD align=right><input type="button" value="Show/Hide" onclick="showStuff('multiplechoice')">
             </TD>
        </TR>
     </TBODY>
</table>
<table border=0 align=center>
     <TBODY id="multiplechoice" style="display: none;" align=center>
         <TR>
            <TD align=right><h3>Multiple Choice</h3></TD>
             </TR>
         <TR>
            <TD align=right>Section Name:</TD>
            <TD align=left><INPUT size=20 type=text name=section1></TD>
             </TR>
         <TR>
            <TD align=right>Directions:</TD>
            <TD align=left><INPUT size=71 type=text name=directions1></TD>
             </TR>
         <TR>
            <TD align=right>Question Number:</TD>  
            <TD align=left><INPUT size=2 type=text name=n1 id=n1 value=1 onkeypress="return alpha(event,numbers)"></TD>
             </TR>   
         <TR>
            <TD align=right>Question:</TD>
            <TD align=left><textarea rows=2 cols=55 name=q1 id=q1></textarea></TD> 
             </TR>
         <TR>
            <TD align=right>Answer A:</TD>
            <TD align=left><INPUT size=35 type=text name=a1></TD></TR>
         <TR>
            <TD align=right>Answer B:</TD>
            <TD align=left><INPUT size=35 type=text name=b1></TD>
             </TR>
         <TR>
            <TD align=right>Answer C:</TD>
            <TD align=left><INPUT size=35 type=text name=c1></TD>
             </TR>
         <TR>
            <TD align=right>Answer D:</TD>
            <TD align=left><INPUT size=35 type=text name=d1></TD>
             </TR>
         <TR>
            <TD align=right>Answer (A,B,C,D):</TD>
            <TD align=left><INPUT size=1 type=text name=correct1 onkeyup="upper(this)" onkeypress="return alpha(event,letters)"   maxlength="1"></TD>
             </TR>
     </TBODY>
</TABLE>
</FORM>

それはすべてを修正します。この作業コードペンを参照してください

于 2013-03-23T15:32:16.103 に答える