表格和表单 - xiaoxustudy

表格和表单

目录：1.表格 2.表单 3.例子

一、表格(接近淘汰)

长表格

使用场景：有一些情况下表格是非常地长的，这时就需要将表格分为三个部分，表头、表格的主体、表格底部。

三个标签：

　　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>

完整的代码

posted on 2020-08-01 17:07 xiaoxustudy 阅读(445) 评论(0) 收藏举报

刷新页面返回顶部