HTML格式的布局问题

Question

我正在尝试制作一个包含各种字段的html表单。我创建了单独的div并使用jquery为它们制作动画。在主页面上，当我点击“管理用户”按钮时，页面上会显示一些元素。我想要实现的是使用表格元素正确对齐这些字段但是当我使用<table>标记时，表单元素会显示在div之外。如何在我使用时点击“管理用户”按钮，使用表格标记正确显示元素。

这是我的代码：

    $(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("fast");
        $( "#panel1" ).hide( "slow");
        $( "#panel3" ).hide( "slow");


    });


    $("#ff").click(function(){
        $("#panel1").slideToggle("fast");
        $( "#panel" ).hide( "slow");
        $( "#panel3" ).hide( "slow");

    });

    $("#man_users").click(function(){
        $("#panel3").slideToggle("fast");
        $( "#panel" ).hide( "slow");
        $( "#panel1" ).hide( "slow");

    });
    });    

  #ff,#flip,#man_users,#add_user{

    padding: 5px;
    //text-align: center;
    background-color: #D9ECF5;
    border: solid 1px #88949A;



    }
    #panel,#panel1,#panel3 {
    padding: 5px;
    //text-align: center;
    background-color: rgb(0,136,159);
    border: solid 1px #88949A;
    color:white;
}

#panel,#panel1,#panel3 {
    padding: 50px;
    display: none;
}

#ff:hover,#flip:hover ,#man_users:hover,#add_user:hover{ 
    background-color:#A0CFE6;
}
body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #0ca3d2;
}
#containier{
    margin-left: auto;
  margin-right: auto;

    background-color:white;
    width:50%;
    font-size:10px;
    text-align:center;

}
h1{

  line-height: 40px;
  font-size: 15px;
  font-weight: bold;
  color: #555;
  text-align: center;
  text-shadow: 0 1px white;
  background: #f3f3f3;
  border-bottom: 1px solid #cfcfcf;
  border-radius: 3px 3px 0 0;
  background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
  background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
  background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
  background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
  -webkit-box-shadow: 0 1px whitesmoke;
  box-shadow: 0 1px whitesmoke;

}
#dd,#panel3{
    text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="containier">
    <h1>admin panel</h1>
    <table>
    <tr>
    <td><input type="button" id ="ff" value="generate report"><br></td>

            <div id="panel1">
            <form id="f1" action="viewer.php" method="post">
            <select id="pickerhtml"  name="select">
            <option>2015</option>  
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
            <option>2019</option>
            <option>2020</option>
            </select>
            <input type="text" id="name">
         <input type="submit" id="ffj" value="view report"><br>

        </form>
        </div>


    <td><input type="button" id="flip" value="Manage Links"><br></td>
     <div id="panel">
        <form action="block_conf_controller.php" method="post" >
        <div id ="dd">
        <input type="checkbox" name="jan" value="Bike">January<br>
            <input type="checkbox" name="feb" value="Car">Feburar<br>
            <input type="checkbox" name="mar" value="Bike">March<br>
            <input type="checkbox" name="apr" value="Car">April<br>
            <input type="checkbox" name="may" value="Bike">May<br>
            <input type="checkbox" name="jun" value="Car">June<br>
            <input type="checkbox" name="jul" value="Bike">July<br>
            <input type="checkbox" name="aug" value="Car">August<br>
            <input type="checkbox" name="sep" value="Bike">September<br>
            <input type="checkbox" name="oct" value="Car">October<br>
            <input type="checkbox" name="nov" value="Bike">November<br>
            <input type="checkbox" name="dec" value="Car">December<br>
            <input type="submit"  value="save" ></form>
        </div>
      </div>
      <td><input type="button" id ="man_users" value="Manage Users"><br></td>
      </tr>
      <div id="panel3">

      <form>
      <select id="add"  name="select1">
            <option>Employee</option>  
            <option>Admin</option>
            </select>
            User Name: <input type="text" name="user_name" id="user_name" placeholder="First name">
            Password:  <input type="password" name="password" id="pass" placeholder="**************">

      <input type="button" id ="add_user" value="Add User"><br>

      </form>

      </div>
      </table>
      </div>

Answer 1

您完成的HTML结构不正确。 您在div之外TD，在其容器后关闭了form ... 我试图清理它但不确定结果......

您最好尝试使用w3c验证器验证您的dom

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("fast");
        $( "#panel1" ).hide( "slow");
        $( "#panel3" ).hide( "slow");


    });


    $("#ff").click(function(){
        $("#panel1").slideToggle("fast");
        $( "#panel" ).hide( "slow");
        $( "#panel3" ).hide( "slow");

    });

    $("#man_users").click(function(){
        $("#panel3").slideToggle("fast");
        $( "#panel" ).hide( "slow");
        $( "#panel1" ).hide( "slow");

    });
    });

#ff,#flip,#man_users,#add_user{

    padding: 5px;
    //text-align: center;
    background-color: #D9ECF5;
    border: solid 1px #88949A;



    }
    #panel,#panel1,#panel3 {
    padding: 5px;
    //text-align: center;
    background-color: rgb(0,136,159);
    border: solid 1px #88949A;
    color:white;
}

#panel,#panel1,#panel3 {
    padding: 50px;
    display: none;
}

#ff:hover,#flip:hover ,#man_users:hover,#add_user:hover{ 
    background-color:#A0CFE6;
}
body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #0ca3d2;
}
#containier{
    margin-left: auto;
  margin-right: auto;

    background-color:white;
    width:50%;
    font-size:10px;
    text-align:center;

}
h1{

  line-height: 40px;
  font-size: 15px;
  font-weight: bold;
  color: #555;
  text-align: center;
  text-shadow: 0 1px white;
  background: #f3f3f3;
  border-bottom: 1px solid #cfcfcf;
  border-radius: 3px 3px 0 0;
  background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
  background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
  background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
  background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
  -webkit-box-shadow: 0 1px whitesmoke;
  box-shadow: 0 1px whitesmoke;

}
#dd,#panel3{
    text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="containier">
    <h1>admin panel</h1>
    <table>
    <tr>
    <td>
        <input type="button" id ="ff" value="generate report"><br>

            <div id="panel1">
            <form id="f1" action="viewer.php" method="post">
            <select id="pickerhtml"  name="select">
            <option>2015</option>  
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
            <option>2019</option>
            <option>2020</option>
            </select>
            <input type="text" id="name">
         <input type="submit" id="ffj" value="view report"><br>

        </form>
        </div>

    </td>
    <td>
      <input type="button" id="flip" value="Manage Links"><br>
      <div id="panel">
        <form action="block_conf_controller.php" method="post" >
        <div id ="dd">
        <input type="checkbox" name="jan" value="Bike">January<br>
            <input type="checkbox" name="feb" value="Car">Feburar<br>
            <input type="checkbox" name="mar" value="Bike">March<br>
            <input type="checkbox" name="apr" value="Car">April<br>
            <input type="checkbox" name="may" value="Bike">May<br>
            <input type="checkbox" name="jun" value="Car">June<br>
            <input type="checkbox" name="jul" value="Bike">July<br>
            <input type="checkbox" name="aug" value="Car">August<br>
            <input type="checkbox" name="sep" value="Bike">September<br>
            <input type="checkbox" name="oct" value="Car">October<br>
            <input type="checkbox" name="nov" value="Bike">November<br>
            <input type="checkbox" name="dec" value="Car">December<br>
            <input type="submit"  value="save" >
        </div>
        </form>
        </div>
      </td>
      <td>
         <input type="button" id ="man_users" value="Manage Users"><br>
      
          <div id="panel3">

         <form>
          <select id="add"  name="select1">
            <option>Employee</option>  
            <option>Admin</option>
            </select>
            User Name: <input type="text" name="user_name" id="user_name" placeholder="First name">
            Password:  <input type="password" name="password" id="pass" placeholder="**************">

         <input type="button" id ="add_user" value="Add User"><br>

         </form>

         </div>
      </td>
      </tr>
      </table>
      </div>