2021-06-02

最新推荐文章于 2021-11-09 20:10:55 发布

娇～～

最新推荐文章于 2021-11-09 20:10:55 发布

阅读量62

点赞数

本文链接：https://blog.csdn.net/m0_51548238/article/details/117474068

版权

HTML表格与表单
一、表格
（1）定义：表格由 <table>标签来定义。
（2）常用标签：
<tr> 定义若干行；
<td> 定义若干个单元；
<caption> 定义表格标题；
（3）合并表格：
跨行合并：rowspan
跨列合并：colspan
<td rowspan=”2”></td> 2表示合并两个单元格
（4）单元格里的文字居中 <td align="center">姓名</td>
二、表单
（1）定义：由<form> </form>元素定义 HTML 表单
（2）常用元素及其类型：
<input type="text"> 定义用于文本输入的单行输入字段；
如：

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

<input type="radio"> 定义单选按钮。
<input type="chechbox"> 定义复选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

<input type="passwodr"> 密码框。
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
三、实战
实现个人简历模板
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption><b>个人简历</b></caption>
        <tr  align="center">
            <td>姓名</td>
            <td><input type="text"></td> 
            <td>性别</td>
            <td><input type="text"></td>
            <td>出生年月</td>
            <td><input type="text"></td>
            <td  rowspan="4" > <input type="file"></td>
        </tr>
        <tr align="center">
            <td >民族</td>
            <td><input type="text"></td>
            <td>政治面貌</td>
            <td ><input type="text"></td>
            <td >身高</td>
            <td ><input type="text "></td>
        </tr>
        <tr align="center"> 
            <td >学制</td>
            <td><input type="text"></td>
            <td >学历</td>
            <td ><input type="text"></td>
            <td >户籍</td>
            <td ><input type="text"></td>
        </tr>
        <tr align="center">
            <td>专业</td>
            <td><input type="text"></td>
            <td colspan="2">毕业学校</td>
            <td colspan="2"><input type="text"size="31"></td>
           
        </tr>
        <tr align="center">
            <td  colspan="7"><b>技能、特长或爱好</b></td>
        </tr>
        <tr align="center">
            <td >外语等级</td>
            <td colspan="2"><input type="text" size="31"></td>
            <td>计算机</td>
            <td  colspan="3"><input type="text" size="72"></td>
           
        </tr>
        <tr>
            <td align="center" colspan="7">个人履历</td>
        </tr>
        <tr>
            <td align="center">时间</td>
            <td align="center" colspan="2">单位</td> 
            <td align="center" colspan="4">经历</td>
        </tr>
        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"size="31"></td>
            <td colspan="4"><input type="text"size="99"></td>
        </tr>
        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"size="31"></td>
            <td colspan="4"><input type="text"size="99"></td>
        </tr>
        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"size="31"></td>
            <td colspan="4"><input type="text"size="99"></td>
        </tr>
        <tr>
            <td align="center" colspan="7">联系方式</td>
        </tr>
        <tr>
            <td align="center">通信地址</td>
            <td colspan="2"><input type="text"size="31"></td>
            <td align="center">联系方式</td>
            <td  colspan="3"><input type="text"size="72"></td>
           
        </tr>
        <tr>
            <td align="center">E-mail</td>
            <td colspan="2"><input type="text"size="31"></td>
            <td align="center">邮编</td>
            <td  colspan="3"><input type="text"size="72"></td>
           
        </tr>
        <tr>
            <td align="center" colspan="7">自我评价</td>
        </tr>
         <tr><td colspan="7"><input type="text"size=163></td></tr>

    </table>

    
</body>
</html>

温馨提示：以上内容仅供参考

娇～～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-02

HTML表格与表单一、表格（1）定义：表格由 <table>标签来定义。（2）常用标签：<tr> 定义若干行；<td> 定义若干个单元；<caption> 定义表格标题；（3）合并表格：跨行合并：rowspan跨列合并：colspan<td rowspan=”2”></td> 2表示合并两个单元格（4）单元格里的文字居中 <td align="center">姓名</td>二、表单（
复制链接

扫一扫