<form>表格对齐

来源:互联网 发布:安卓基于linux还是unix 编辑:程序博客网 时间:2024/06/08 16:39

最近的小项目用到了form表格,但是比较原始的写法没有对齐,如:

                    <div>
                        <br>
                        <form name="addForm" action="functioninfo.jsp" method="post">
                            FunctionID:  <input type="text" name="functionID">&nbsp;
                            FunctionName:<input type="text" name="functionName">&nbsp;
                            URI:         <input type="text" name="uri"><br>
                            type      :   <input type="text" name="type">&nbsp;
                            typeID      : <input type="text" name="typeID"><br>
                                        <input type="hidden" name="action" value="add">
                                        <button class="submit" type="submit">新增</button>
                        </form>
                    </div>

于是,期望弄一个可以自动对齐的表格:

                    

<form method="post" name="functioninfo_add" id="add" action="functioninfo.jsp" title='' style="width:550px;margin:0px;">
                          <fieldset>
                              <table>
                                       <tbody>
                                           <tr>
                                                 <td>FunctionID:</td>
                                                 <td><input type="text" name="functionID"   /></td>
                                                 <td>FunctionName:</td>
                                                 <td><input type="text" name="functionName" /></td>
                                           </tr>
                                           <tr>
                                                 <td>URI:</td>
                                                 <td><input type="text" name="uri"   /></td>
                                                 <td>type:</td>
                                                 <td><input type="text" name="type" /></td>
                                           </tr>
                                           <tr>
                                                  <td>typeID:</td>
                                                  <td><input type="text" name="typeID" /></td>
                                                  <td><input type="hidden" name="action" value="add" /></td>
                                                  <td><button class="submit" type="submit">新增</button></td>
                                           </tr>
                                     </tbody>
                             </table>
                       </fieldset>

                    </form>

              效果如: