html网页中表格的各种应用

最新推荐文章于 2024-04-29 22:26:37 发布

Roben_

最新推荐文章于 2024-04-29 22:26:37 发布

阅读量579

点赞数 2

分类专栏：页面制作项目实践文章标签： html html5

本文链接：https://blog.csdn.net/Roben_/article/details/109384123

版权

项目实践同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

页面制作

1 篇文章 0 订阅

订阅专栏

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

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

作业1

在这里插入图片描述

<!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>

运行结果：
在这里插入图片描述
作业2：

<!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>

运行结果：
在这里插入图片描述
作业3

<!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>

运行结果：
在这里插入图片描述

Roben_

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
html网页中表格的各种应用

第六周布置了前五周的作业复杂程度循序渐进，没听课的我根据一些博客做了一下。作业1<!DOCTYPE html><html lang="en"> <meta charset="UTF-8"> <title>作业1</title></head><body> <table border="2" width="400" cellpadding="30" bordercolor="#7ff
复制链接

扫一扫