欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

html网页中表格的各种应用

程序员文章站 2024-03-23 08:09:52
...

第六周布置了前五周的作业

复杂程度循序渐进，没听课的我根据一些博客做了一下。

作业1

html网页中表格的各种应用

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>作业1</title>
</head>
<body>
    <table border="2"  width="400" cellpadding="30" bordercolor="#7fffd4">
        <tr>
            <td rowspan="3" colspan="3" height="60"> </td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
            <td >  </td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2" height="40">  </td>
            <td rowspan="2" height="40">  </td>
            <td rowspan="2" height="40">  </td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td rowspan="3" colspan="3" height="60">  </td>
        </tr>
    </table>
</body>
</html>

运行结果：
html网页中表格的各种应用
作业2：
html网页中表格的各种应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业2</title>
</head>
<body>
<table cellpadding="30" border="3" bordercolor="deeppink">
    <tr>
        <th rowspan="8" width="150"><font color="red" size="12"><u>照片</u></font></th>
        <td rowspan="4" width="150"></td>
        <td rowspan="2"width="150"></td>
        <td width="150"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td rowspan="4"></td>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
</body>
</html>

运行结果：
html网页中表格的各种应用
作业3
html网页中表格的各种应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业3</title>
</head>
<body>
<form>
    <table bgcolor="#e0ffff" border="1" width="800">
        <tr>
            <th colspan="3"><font color="#00bfff">网站主办者用户注册</font></th>
        </tr>
        <tr>
            <td width="200">用户名：</td>
            <td width="250"><input id="username" type="text" value="用户自定义"> <u><font color="red">*检测</font></u></td>
            <td><font>注：</font>用户名中只允许输入中文字符，英文字符，数字和下划线。
                如果您想查找已经注册的用户名的手机或邮件验证码。
                请在用户名处输入您已注册的用户名，点击检测便可得到已注册用户或邮件验证码</td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input id="password1" type="password"><font color="red"> *</font></td>
            <td><font color="red">注：</font>密码至少6位，不能全是数字。并且不能与用户名相同</td>
        </tr>
        <tr>
            <td>请再次输入密码：</td>
            <td><input id="password2" type="password"><font color="red"> *</font></td>
            <td></td>
        </tr>
        <tr>
            <td>所在省/自治区/直辖市：</td>
            <td><select style="width: 200px">
                <option value="上海">上海</option>
                <option value="浙江">浙江</option>
                <option value="北京">北京</option>
            </select><font color="red"> *</font></td>
            <td></td>
        </tr>
        <tr>
            <td>姓名：</td>
            <td><input type="text" id="name"><font color="red"> *</font></td>
            <td></td>
        </tr>
        <tr>
            <td>移动公司电话：</td>
            <td><input id="tel" type="tel"><font color="red"> *</font></td>
            <td><font color="red">注：</font>电话号码电话号码电话号码</td>
        </tr>
        <tr>
            <td>联通公司电话</td>
            <td><input type="tel" value="如是联通号码请填写此处"><font color="red"> *</font></td>
            <td><font color="red">注：</font>看不清看不清看不清看不清看不清看不清看不清</td>
        </tr>
        <tr>
            <td>小灵通电话： </td>
            <td><input type="text" style="width: 80px">-<input type="text" style="width: 120px"></td>
            <td><font color="red">注：</font>看不清看不清看不清看不清看不清看不清</td>
        </tr>
        <tr>
            <td>电子邮箱：</td>
            <td><input type="email" value="您最常用，且接受邮件最稳定的邮箱"><font color="red">*</font></td>
            <td><font color="red">注：</font>您所填写的电子邮箱主要用于接受邮箱验证码</td>
        </tr>
        <tr>
            <td>备注：</td>
            <td><textarea>此处无需填写</textarea></td>
            <td></td>
        </tr>
        <tr>
            <td>验证码</td>
            <td>
                <input type="text">
                <input type="button" value="9255">
            </td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3"></td>
        </tr>
        <tr>
            <th colspan="3"><u>注册</u>   <u>取消</u></th>
        </tr>
    </table>
</form>
</body>
</html>

运行结果：
html网页中表格的各种应用

相关标签： 页面制作 项目实践 html html5

上一篇： 使用Jeesite快速开发笔记

下一篇： HDFS的JavaAPI操作

推荐阅读