表格与表单的嵌套关系

表格与表单的嵌套关系

想要用表格与表单做一个注册界面，却对这两个元素的嵌套关系挡住的脚步？到底是表格里面放置表单呢？还是表单里面放置表格呢？

没关系，小马哥带你答疑解惑！

1.首先我们可以创建一个空表单，在这个表单里面不用放任何东西

2.然后我们在这个空表单里面放置一个表格元素《table》《/table》;在这个表格里面我们可以放置《tr》和《td》，比如说先设置一个有五行 两列的注册页面可以在table先放置这样一个有五行两列的单元格

// An highlighted block
 					<tr>
                         <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>

3.然后我们只需要在每个单元格《td》里面放置input就可以啦 然后再将需要合并的单元格用colspan合并就可以了

// 单元格内部
		<tr>
             <td colspan="2"> <input type="text" placeholder="真实姓名" class="inpua"></td>
	          <!-- 注释掉我们需要合并的代码 -->
	          <!-- <td></td> -->
        </tr>

这样我们就完成了这样的一个嵌套

来一起看看效果吧

这里是源代码 不会的小伙伴可以参考一下哦

// An highlighted block
<form action="http://www.baidu.com" method="POST">
                <table border="0"  height="450px">
                    <tr>
                        <td colspan="2"> <input type="text" placeholder="邮箱账号" width="330px" height="" class="inpua"></td>
                        <!-- <td></td> -->
                    </tr>
                    <tr>
                        <td colspan="2"> <input type="password" placeholder="密码（由6-16位字母、数字及字符组成）" class="inpua"></td>
                        <!-- <td></td> -->
                    </tr>
                    <tr>
                        <td colspan="2"> <input type="password" placeholder="重复密码" class="inpua"></td>
                        <!-- <td></td> -->
                    </tr>
                    <tr>
                        <!-- 注释掉我们需要合并的代码 -->
                        <td colspan="2"> <input type="text" placeholder="真实姓名" class="inpua"></td>
                        <!-- <td></td> -->
                    </tr>
                    <tr>
                        <td > <input type="text" placeholder="手机验证码" class="inpua1"></td>
                        <td> <input type="button" value="获取验证码"></td>
                    </tr>  
                </table>
            </form>

这样我们就完成了表格与表单的嵌套 感兴趣的小伙伴可以试试哦！