博客列表 >4月23日作业 表格和html5标签的练习

4月23日作业 表格和html5标签的练习

ifhover的博客
ifhover的博客原创
2019年04月24日 00:01:37751浏览

完成表格的跨行合并功能

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td rowspan="2">四和八</td>
        </tr>
        <tr>
            <td>五</td>
            <td>六</td>
            <td>七</td>
        </tr>
        <tr>
            <td>九</td>
            <td>十</td>
            <td>十一</td>
            <td>十二</td>
        </tr>
    </table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

独立完成一个用户注册表单

实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<table border="1" align="center">
<tr>
<td>用户名</td>
<td><input type="text" name="" id=""></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="" id=""></td>
</tr>
<tr>
<td>性别</td>
<td>
<select name="" id="">
<option value ="男">男</option>
<option value ="女">女</option>
</select>
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="email" >
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

简易的后台首页

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

        <table border="1" align="center" >
            <tr><td align="center" colspan="4"><h1>后台管理</h1></td></tr>
            <tr>
                <td><b>首页-添加商品</b></td>
                <td>管理商品</td>
                <td>管理用户</td>
                <td>退出账号</td>
            </tr>
            <tr>
                <td colspan="4">
                    <form action="">
                        <table>
                            <tr>
                                <td>
                                    商品名称
                                </td>
                                <td>
                                    <input type="text" name="" id="">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    商品价格
                                </td>
                                <td>
                                    <input type="number" name="" value="0" min="0" id="">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    上架日期
                                </td>
                                <td>
                                    <input type="date" >
                                </td>
                            </tr>
                            <tr>
                                <td align="center" colspan="2">
                                    <input type="submit" value="确定添加">
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>
            </tr>
        </table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议