表格和表单标签

已于 2022-04-13 21:51:40 修改
阅读量461 收藏 1
点赞数
分类专栏： # html 文章标签： html5
于 2022-03-23 22:56:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46048542/article/details/123696366
版权

数据表格的创建

数据表格的创建
请添加图片描述
快速创建
（1）

table>tr>td

请添加图片描述
（2）

table>tr>td*2

请添加图片描述
（3）

  table>(tr>td*2)*2

等价于

table>tr*2>td*2

请添加图片描述

table表格的属性

table表格的属性

1.宽度width
2.高度height
3.边框border
4.边框颜色bordercolor
5.背景颜色bgcolor
6.水平对齐 align="left或right或center"”
7. cellspacing=" 单元格与单元格之间的间距“
8. cellpadding=" 单元格与内容之间的空隙"

width px或者百分比(相对于父元素的)
height px或者百分比(相对于父元素的)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="50%" height="500px"
    align="center"
    bordercolor="red"
    bgcolor="yellow"
    cellspacing="0"
    cellpadding="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

请添加图片描述

行tr属性

行tr属性

高度.height
背景颜色bgcolor
文字水平对齐align="left或 right或center
文字垂直对齐valign="top或 middle或bottom'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="300px" height="300px" align="center"
    bgcolor="yellow">
        <tr bgcolor="orange" height="100px" align="center" valign="bottom">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

请添加图片描述

单元格td属性

单元格td属性

宽度width
高度height
背景颜色bgcolor
文字水平对齐 align="left或right或 center'
文字垂直对齐 valign="top或 middle或bottom";

td: 如果一个单元格的设置宽度，影响的是这一整列的宽度
td:如果一个单元格的设置高度，影响的是这一整 行的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="300px" height="300px" align="center"
    bgcolor="yellow">
        <tr>
            <td width="200px">1</td>
            <td height="200px">2</td>
        </tr>
        <tr>
            <td bgcolor="red">3</td>
            <td align="right" valign="top">4</td>
        </tr>
    </table>
</body>
</html>

请添加图片描述

表格合并列

表格合并列
Colspan=“所要合并的单元格的列数”必须给td。
请添加图片描述
Rowspan=“所要合并的单元格的行数"必须给td。
请添加图片描述

表格练习

表格练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
        <tr height="50px" align="center">
            <td width="100px">会员姓名</td>
            <td width="150px"></td>
            <td width="100px">出生日期</td>
            <td width="100px"></td>
        </tr>
        <tr height="50" align="center">
            <td>身份证号</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr height="50" align="center">
            <td>通讯地址</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr height="50" align="center">
            <td>联系电话</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr height="50" align="center">
            <td>会员卡号</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
    </table>
</body>
</html>

请添加图片描述

表单标签

表单标签
表单的作用:收集用户信息。
请添加图片描述
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
        输入框:<input type="text" placeholder="请输入用户名" name="username">
        <br>
        密码框:<input type="password" placeholder="请输入密码" name="mima">
        <br>
        <button type="reset">重新输</button>
        <h2>复选框:</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">橘子
        <h2>复选框:</h2>
        <input type="checkbox" checked>苹果<!-- 默认选中 -->
        <input type="checkbox">香蕉
        <input type="checkbox">橘子
        <h2>复选框:</h2>
        <input type="checkbox">苹果
        <input type="checkbox" disabled>香蕉<!-- 选中不了 -->
        <input type="checkbox">橘子
        <h2>单选框：</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit" value="提交">
        <input type="reset">
        <h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>
        <h2>下拉菜单</h2>
       <!--  第一种 -->
        <select>
            <option selected disabled>请选择</option>
            <option>南京</option>
            <option>连云港</option>
            <option>徐州</option>
        </select>
        <br>
        <!-- 第二种 -->
        <select size="2"><!-- 调整选项个数 -->
            <option>南京</option>
            <option>连云港</option>
            <option>徐州</option>
        </select>
        <br>
        <select multiple><!-- 多选 -->
            <option>南京</option>
            <option>连云港</option>
            <option>徐州</option>
        </select>
        <br>
        <input type="file"multiple><!-- 列子 -->
        <br>
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="women">女</label>
    </form>
</body>
</html>

请添加图片描述
请添加图片描述

表格与表单组合

表格与表单组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<<device-width>>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <table border="1" cellpadding="30"> 
            <tbody>
                <tr align="center">
                    <td rowspan="4"> 总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"</td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"</td>
                </tr>
                <tr align="center">
                    <td colspan="2"> 
                    <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

请添加图片描述

单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>你的性别</div>
        <div>
            <input type="radio" name="aaa" id="man">
            <label for="man">男</label>
        </div>
        <div>
            <input type="radio" name="aaa" id="woman">
            <label for="woman">女</label>
        </div>
    </div>

    <div>
        <div>满意度调查</div>
        <div>
            <input type="radio" name="ccc" checked>非常满意
        </div>
        <div>
            <input type="radio" name="ccc">满意
        </div>
    </div>
</body>
</html>

请添加图片描述

复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>你的兴趣爱好</div>
        <div>
            <input type="checkbox" name="aaa">抽烟
            <input type="checkbox" name="aaa">喝酒
            <input type="checkbox" name="aaa">烫头
        </div>
    </div>
    <div>
        <div>你擅长的技术</div>
        <div>
            <input type="checkbox" name="bbb" id="html">
            <label for="html">html</label>
            <input type="checkbox" name="bbb" id="css">
            <label for="css">css</label>
            <input type="checkbox" name="bbb" id="js">
            <label for="js">js</label>
        </div>
    </div>
    <div>
        <div>你的兴趣爱好</div>
        <div>
            <input type="checkbox" name="aaa">抽烟
            <input type="checkbox" name="aaa" checked="checked">喝酒
            <input type="checkbox" name="aaa" checked>烫头
        </div>
    </div>
</body>
</html>

请添加图片描述

上传文件和隐藏字段

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>请截图说明</div>
        <div>
            <!-- 上传文件 -->
            <input type="file" name="" id="">
        </div>
    </div>

    <div>
        <div>隐藏按钮</div>
        <div>
            <input type="hidden" name="" id="" value="带给后端的个人信息">
        </div>
    </div>

    <div>
        <div>禁用,只读</div>
        <div>
            <button disabled="disabled">注册</button>
            <br>
            <input type="radio" disabled>不满意
            <br>
            <input type="text" disabled value="111111">
            <br>
            <input type="text" readonly value="111111">
        </div>
    </div>
</body>
</html>

请添加图片描述

下拉菜单

请添加图片描述
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>下拉菜单</h1>
    <div>你的收获地址</div>
    <select name="" id="">
        <option value="">辽宁</option>
        <option value="">山东</option>
        <option value="">山西</option>
        <option value="">河北</option>
    </select>
    <div>
        <select size="3" multiple>
            <option>桌子</option>
            <option>椅子</option>
            <option>凳子</option>
            <option>电脑</option>
        </select>
    </div>

    <div>
        <select size="3" multiple>
            <option value="" disabled>桌子</option>
            <option value="">椅子</option>
            <option value="">凳子</option>
            <option value="">电脑</option>
        </select>
    </div>
</body>
</html>

请添加图片描述

文本域

请添加图片描述

resize重新设置大小,vertical垂直 horizontal水平both,none

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea{
            width: 300px;
            height: 300px;
            resize: both;
            /* resize重新设置大小,vertical垂直 horizontal水平both,none */
        }
    </style>
</head>
<body>
    <div>
        <textarea name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>
    </div>
</body>
</html>

请添加图片描述

字段集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        fieldset{
            border: 1px solid blue;
        }
        legend{
            border: 1px solid red;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>字段集</h1>
    <fieldset>
        <legend>性别</legend>
        <input type="radio" name="aa">男
        <br>
        <input type="radio" name="aa">女
    </fieldset>
</body>
</html>

请添加图片描述

九阈
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 代码rowspan="2" 代表什么意思
weixin_34255055的博客
04-14 2502
表格的单元格向下跨一行, 相当于Excel里的当前单元格与下一行同列的单元格"合并单元格"的效果. 是TD标签的一个属性. rowspan属性,是指可以实现HTML表格中一列跨越多行.rowspan="2" 是指列跨越2行. 转载于:https://www.cnblogs.com/tfy1332/p/3663443.html...
HTML表单·表格标签
ThReE_To的博客
09-14 643
表单和表格一· 表格1.表格的基本结构：table标签（表格）、tr标签（行）、thead标签（表头）、tbody标签（表身）、tfoot（表脚）、td标签（标准单元格）、th标签（表头单元格） 2.table标签属性 边框border=“?px” 表示是否有边框，边框的宽度是多少；cellpadding="" 是指表格内容与边框的距离；cellspacing=""是指表格与表格之间的距离； 3.
html表格表单标签的结合
weixin_30634661的博客
06-07 208
今天我尝试将表格表单基本标签结合起来放在网页中，发现再没用表单元素中<form></form>时各类标签功能都可显示，只是不能提交网页，所有与提交网页的标签都不能使用提交功能，而且按钮类的功能都不能实现，其他的可以使用 <td height="300"> 输入用户名<input type="text" name="1" val...
表格和表单标记
小` pi孩
01-18 253
表格标记 例子：学生考试成绩单 <body> <table width="318" height="167" border="1" align="center" bgcolor="red> <caption>学生考试成绩单</caption> <tr> <td align="center" valign="middle">姓名</td> <td align="center" valign="m
HTML学习笔记（二）表单标签与表格标签
m0_51734025的博客
12-21 749
只要不放弃自己，在哪都能放光！！！！！每天鼓励自己的一句话 下面是看了林海峰老师的视频总结与大家分享 一、表格标签 首先为大家列举它的属性 border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.（最好通过css来设置长宽） rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格） 下面用一个小案例为大家介绍table标签即展示它的效果 <!DOCTYPE html> &.
表格标签、表单标签
Dreamer
07-24 703
表格标签、表单标签 文章目录表格标签、表单标签表格标签``表单标签 表格标签<table> <table>标签表示表格，<tr>表示表格中的行，<td>表示表格中的单元格。<th>表示表头。 单元格td必须设计在tr中，th也必须在tr中 table中的一些属性： ​ 单元格跨列：colspan。 ​ 单元格跨行：rowspan。 ​ 内容和单元格之间的间距：cellpadding。 ​ 单元格间的间距：cellspacing。 html5中将表格
html表格表单.pptx
11-20
介绍html表格表单元素，这也是前端比较重要的内容。学了之后你可以用标签简单做一个课程表。还有调查问卷等等
html表单（表格）
07-15
表单标签 table form
02 列表、表格与表单.ppt
07-23
掌握： 掌握列表的用法 使用表格的基本结构实现简单表格 使用表格相关标签实现跨行、跨列的复杂表格 会使用表单的基本结构制作表单页面 会使用各种表单元素实现注册页面 能理解post和get两种提交方式的区别
HTML 使用表单标签实现注册页面的实例代码
12-14
　- 使用图片标签提交表单 <input type="image" src="图片的路径"/>   完整代码：   <html> <head> <title>World</title> </head> <body> <form action="01-...
用JS控制表格的逐行变色的表单
12-11
代码干净,无冗余标签. 2.样式,结构分离(为了方便,样式用内联的形式,实现应用时可以用外联方式引用.) 3.用JS控制表格的逐行变色 4.支持选中项高亮 5.支持checkbox的全选/取消功能 6.分页标签已经做好,没有做后台代码...
HTML中的表格、表单标签
weixin_75202470的博客
07-07 160
先准备一个HTML的空的结构：！+回车（自动生成HTML的结构标签html、head、body等等）。定义form标签的时候VS Code会提醒使用哪种提交方式method，这里我们先演示采用GET提交的方式。form表单定义好之后，自带了两个属性：action=“ ”和method=“get”。光有表单是没有数据的。表单项的定义，我们可以在表单里先定义两个表单项。第一个表单项“用户名：”，使用一个input标签，然后指定type属性为“text”（表示当前的表单项是一个文本输入框）。
HTML 基础【2】 -- 表格标签 / 表单标签
热门推荐
Create value with coding
01-16 1万+
请先学习往期内容：HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签 作业分析 上一篇《HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签》给大家留了一个作业： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <bo...
表格，表单标签的介绍
m0_63830793的博客
01-04 319
表格定义：在HTML文档中写入表格标签，在页面在就会显示添加网络状的图形，通过网络状的图形中的每一个单元格我们可以完成内容上的布局 1.表格完成页面布局的原因 通过把内容填入到单元格对应的位置我们可以完成对内容的排版 2.在页面当中如何制作表格 <table>表格区域：在HTML文件的空间内划出一块专门做表格的区域 <tr>单元行标签：在表格区域内做出一行表格 <td></td>单元格标签：在一行表格内分出列数，有几个td就代表有几个单元格 &l
《离思》——元稹
weixin_30920853的博客
07-28 104
曾经沧海难为水，除却巫山不是云。 取次花丛懒回顾，半缘修道半缘君。 转载于:https://www.cnblogs.com/codingthings/p/4684745.html
表格 表单 标签 002
的博客
03-25 158
表格 表单 表格标题2 1 2 3 姓名 年龄 性别 小林 晓丽 小札 17岁 18岁 <!-- 1...
表格，表单的基础标签和属性
baijiao1314的博客
09-11 1662
创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： 单元格内的文字 在上面的语法中包含三对HTML标签，分别为 、、，他们是创建表 格的基本标签，缺一不可，下面对他们进行具体地解释 1.table用于定义一个表格。 2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就...
前端从零开始学习笔记（七）-----table表格的使用
m0_61656944的博客
01-05 1590
表格的创建： 快捷键：table>tr*2>td*3 其中tr表示行，td表示这一行的单元格的内容，例如说一个tr包裹了3个td,就是指一行之内有三个单元格。 表格<table>的属性： 在table标签中可以定义以上这些属性的内容： <table border="1" bordercolor="red" width="500px" height="500px" align="center" cellspacing="0" cellpadding=
表格和表单结合网易邮箱
最新发布
11-22
很抱歉，根据提供的引用内容，无法回答关于表格和表单结合网易邮箱的问题。引用内容中只提到了在字符串mess中添加了一些文本，但并没有提到与网易邮箱相关的信息。请提供更多相关信息或明确问题。 --相关问题--: 1...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值