长表格
使用场景:有一些情况下表格是非常地长的,这时就需要将表格分为三个部分,表头、表格的主体、表格底部。
三个标签:
1. thead 表头 : thead 中的内容,永远会显示在表格的头部
2. tbody 表格主体 :tbody 中的内容,永远会显示在表格的中间
3. tfoot 表格底部 :tfoot 中的内容,永远会显示在表格的底部
如果表格中没有写 tbody,浏览器会自动在表格中添加 tbody,并且将所有的 tr 都放到 body 中。
在表单中可以接受 fieldset 来为表单项进行分组,可以将表单项中的同一组放到 fieldset 中。在 fieldset 可以使用 legend 子标签,来指定组名。
最终实现的效果
详细步骤
为表单项进行分组,指定组名。
在分组里填充信息
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <!-- 第一部分 --> <fieldset> <!-- 分组名称 --> <legend>录入系统</legend> <div> <span>姓名:</span> <input type="text" placeholder="请输入姓名"/> </div> <div> <span>年龄:</span> <input type="text" placeholder="请输入年龄"/> </div> <div> <span>性别:</span> <select> <option value ="男">男</option> <option value ="女">女</option> </select> </div> <div> <span>手机:</span> <input type="text" placeholder="请输入手机号码"/> </div> <input type="submit" value="创建新用户"/> </fieldset> </div> </body> </html>
在分组下写一个表格,先写个表头
写表格主体
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <!-- 第一部分 --> <fieldset> <!-- 分组名称 --> <legend>录入系统</legend> <div> <span>姓名:</span> <input type="text" placeholder="请输入姓名"/> </div> <div> <span>年龄:</span> <input type="text" placeholder="请输入年龄"/> </div> <div> <span>性别:</span> <select> <option value ="男">男</option> <option value ="女">女</option> </select> </div> <div> <span>手机:</span> <input type="text" placeholder="请输入手机号码"/> </div> <input type="submit" value="创建新用户"/> </fieldset> <!-- 第二部分 --> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>手机</th> <th>删除</th> </tr> <tbody> <tr> <td>许一</td> <td>女</td> <td>30</td> <td>13539511111</td> <td><button>删除</button></td> </tr> <tr> <td>许二</td> <td>男</td> <td>20</td> <td>13539522222</td> <td><button>删除</button></td> </tr> <tr> <td>许三</td> <td>女</td> <td>25</td> <td>13539533333</td> <td><button>删除</button></td> </tr> </tbody> </thead> </table> </div> </body> </html>
下面完成样式。
让整个表单上下外边距为 50px,左右空白自适应并且相等。
设置 fieldset 的边框跟下外边距,设置 fieldset 中的 input 宽高跟外边距。
设置 table 的宽度、边框,设置文本对齐方式为居中。设置表格的表头 thead 的背景颜色跟字体颜色。设置表格的行 tr 的行高为 40 px。
至此,完成了一个简单的表单。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #app{ margin: 50px auto; width: 600px; } fieldset{ border: 2px solid orange; margin-bottom: 20px; } fieldset input{ width: 200px; height: 30px; margin: 10px 0; } table{ width: 100%; border: 10px solid orange; text-align: center; } table thead{ background-color: orange; color: #fff; } table tr{ line-height: 40px; } </style> </head> <body> <div id="app"> <!-- 第一部分 --> <fieldset> <!-- 分组名称 --> <legend>录入系统</legend> <div> <span>姓名:</span> <input type="text" placeholder="请输入姓名"/> </div> <div> <span>年龄:</span> <input type="text" placeholder="请输入年龄"/> </div> <div> <span>性别:</span> <select> <option value ="男">男</option> <option value ="女">女</option> </select> </div> <div> <span>手机:</span> <input type="text" placeholder="请输入手机号码"/> </div> <input type="submit" value="创建新用户"/> </fieldset> <!-- 第二部分 --> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>手机</th> <th>删除</th> </tr> <tbody> <tr> <td>许一</td> <td>女</td> <td>30</td> <td>13539511111</td> <td><button>删除</button></td> </tr> <tr> <td>许二</td> <td>男</td> <td>20</td> <td>13539522222</td> <td><button>删除</button></td> </tr> <tr> <td>许三</td> <td>女</td> <td>25</td> <td>13539533333</td> <td><button>删除</button></td> </tr> </tbody> </thead> </table> </div> </body> </html>