CODEWITHSUNDEEP
javascripthtmlalignment
Dustin H
Dustin H

Reputation: 85

Table aligning left when elements are shown

I have this HTML code:

<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>

Ok so the problem is when I click show/hide it shows the form, but it moves everything in the form over to the left. I would like it to stay all aligned in the center. Is there anyway to do this? I left out all the other functions I have linked to everything else, so don't worry about that it all works. Any help is greatly appreciated.

Upvotes: 0

Views: 126

Answers (1)

Manish Mishra
Manish Mishra

Reputation: 12375

why don't you place your two TBodys into separate table?

something like below:

<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>

it fixes everything. see this working codepen

Upvotes: 1

Related Questions