HTML表格与表单

已于 2022-02-27 21:36:50 修改
阅读量2.5k 收藏 52
点赞数 7
分类专栏： 前端基础 文章标签： html 前端 html5 css javascript
于 2022-02-20 22:00:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whhcs/article/details/123036799
版权

目录

HTML表格与表单

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

 

表格常用标签

标签描述
table定义表格
th定义表格的表头
tr定义表格的行
td定义表格的单元
caption定义表格的标题
thead定义表格的页眉
tbody定义表格的主体
tfoot定义表格的页脚

 

表格常用属性

属性值描述
bordernpx设置表格的边框
widthnpx, n%设置表格的宽度
colspannumber合并表格的列
rowspannumber合并表格的行
alignright
left
center
justify		表格在文档中的水平对齐方式
valigntop
middle
bottom
baseline		表格在文档中的垂直对齐方式
cellpaddingnpx内容和边框之间的间距
cellspacingnpx单元格之间的间距
bgcolor颜色值设置表格背景颜色
framevoid
border
above
below
hsides
lhs
rhs
vsides		不显示外边框
四周都显示
显示上部的外边框
显示下部的外边框
显示上下的外边框
显示左部的外边框
显示右部的外边框
显示左右的外边框
rulesnone
rows
cols
all		内边框将不被显示
内边框将在行之间显示
内边框在列之间显示
内边框将被显示

 

表格demo

实现效果

在这里插入图片描述

 

实现代码
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格页面</title>
</head>
<body>
	<table border="1" width="500px">
		<caption>角色信息表</caption>
			<tr>
				<td align="left" rowspan="4">学生</td>
				<th align="center">序号</th>
				<th align="center">姓名</th>
				<th align="center">性别</th>
				<th align="center">年龄</th>
				<th align="center">电话</th>
			</tr>
			<tr>
				<td>1</td>
				<td>李白</td>
				<td>男</td>
				<td>18</td>
				<td>5201314</td>				
			</tr>
			<tr>
				<td>2</td>
				<td>干将莫邪</td>
				<td>男</td>
				<td>23</td>
				<td>5201314</td>				
			</tr>
			<tr>
				<td>3</td>
				<td>云中君</td>
				<td>男</td>
				<td>16</td>
				<td>5201314</td>				
			</tr>
	</table>

</body>
</html>

 

HTML表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等，这些元素，统称“控件”。

用于收集用户信息，进行人机交互操作。

表单使用表单标签 <form>来设置。

属性描述
name指定控件的名称，可重复
id指定标签的唯一标识
value输入（收集、设置）控件的值
checked复选框（单选）组默认被选中的项目
selected列表框组默认被选中的项目
src图片框的图片来源
onclick鼠标单击事件
disabled禁用该控件
multiple允许多选（适合普通列表框）

 

html表格与表单综合demo

实现效果

实现效果如图所示：

在这里插入图片描述

 

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册页面</title>
</head>
<body>
	<form action="" method="">
		<table border="0" width="500px">
			<tr>
				<td align="right">请输入用户名：</td>
				<td><input type="text" name="" id=""></td>
			</tr>
			<tr>
				<td align="right">请输入密码：</td>
				<td><input type="password" name="" id=""></td>
			</tr>
			<tr>
				<td align="right">再次输入密码：</td>
				<td><input type="password" name="" id=""></td>
			</tr>
			<tr>
				<td align="right">性别：</td>
				<td>
					<input type="radio" name="xb" id="" 
					checked="checked">男
					<input type="radio" name="xb" id="">女
				</td>
			</tr>
			<tr>
				<td align="right">兴趣爱好：</td>
				<td>
					<input type="checkbox" name="" id="">游泳
					<input type="checkbox" name="" id="">爬山
					<input type="checkbox" name="" id="">看书
					<input type="checkbox" name="" id="">思考
				</td>
			</tr>
			<tr>
				<td align="right">生日：</td>
				<td> 
					<select>
						<option value="2017">2017</option>
						<option value="2018">2018</option>
						<option value="2019">2019</option>
						<option value="2020">2020</option>
					</select>年
					<select>					
						<option value="01">01</option>
						<option value="02">02</option>
						<option value="03">03</option>
						<option value="04">04</option>
					</select>月
					<select>					
						<option value="01">01</option>
						<option value="02">02</option>
						<option value="03">03</option>
						<option value="04">04</option>
					</select>日
				</td>
			</tr>
			<tr>
				<td align="right">头像：</td>
				<td>
					<img src="d:Sublime/html/image/headLogo/13.gif">
					<select>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>	
					</select>
				</td>
			</tr>
			<tr>
				<td align="center	" colspan="2">
					<input type="submit" value="注册">
				</td>
			</tr>

		</table>
	</form>
</body>
</html>
whhom
关注
  • 7
    点赞
  • 踩
  • 52
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML之表格与表单
weixin_49087505的博客
06-10 761
文章目录表格一.表格的格式二.html的表格标签 表格 一.表格的格式 <table> //定义表格 <tr> //行标签，必须放在<table></table>标签中 <th></th> //单元格标签，表示列标题，文字自动加粗并居中，必须放在<tr></tr>标签中 <td></td> //<td></td>：单元格标签，必须放在<tr>
HTML表单和表格
m0_58857666的博客
06-02 769
表单 定义和用法 <form> 标签用于为用户输入创建 HTML 表单。 表单能够包含input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含menus、textarea、fieldset、legend和label 元素。 表单用于向服务器传输数据。 ...
HTML中表格与表单的使用
SE_FUE_的博客
02-09 875
•table标签：表格整体上下合并→只保留最上的，删除其他•左右合并→只保留最左的，删除其他。•th标签：表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示（替换掉td）②：1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来。•caption标签：表格整体大标签，默认在表格整体顶部居中位置显示。（表格结构标签写在table标签内部，表格标签内部用于包裹tr标签）①：1.使用label标签把内容（如：文本）包裹起来。•select标签：下拉菜单的整体。
HTML表格（table）实例
热门推荐
hj1993的博客
07-30 5万+
HTML表格（table）实例 实例1：课程表 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;课程
html table 个人简历demo
境由心生
06-07 1万+
个人简历 个人简历 个人资料 姓 名： 婚姻状况： 照片 出 生： 政治面貌：
html基础--表单
m0_54510474的博客
05-20 185
介绍一些常用表单，包括文本输入框、单选框、email输入框等以及一些demo
原生 html 绘制表格
qq_41365048的博客
03-21 1134
心血来潮，打开自己电脑的 idea 找到 n 久之前自己练手的 demo, 觉得还挺有用的，就随手记录一下咯。如果各位看官有更加便捷的方式或插件绘制表格的方法也可以留言讨论一下哈。 实现效果： 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生成绩表</title> </head> <bod
HTML表格与表单.ppt
05-02
HTML表格与表单 HTML文档结构是HTML文档的基础，它是构成HTML文档的基本结构。HTML文档结构主要包括头部、身体和尾部三个部分。 在HTML文档中，我们可以使用各种标签来排版布局，例如 链接、图片、换行、分段、...
实验三HTML表格与HTML表单优质资料.doc
12-02
HTML 表格与 HTML 表单优质资料 本资源为实验三 HTML 表格与 HTML 表单优质资料，涵盖了 HTML 表格和 HTML 表单的相关知识点。通过本资源，读者可以掌握网页中插入表格数据的标记的用法、不规则表格的创建方法、...
html表格与表单的制作
03-23
这个文件可以让你轻松懂得网页中的表格的制作
html表格表单.pptx
11-20
介绍html表格表单元素，这也是前端比较重要的内容。学了之后你可以用标签简单做一个课程表。还有调查问卷等等
实验三-HTML表格与HTML表单.doc
07-15
HTML 表格与 HTML 表单 HTML 表格是 HTML 中的一种基本结构元素，用于组织和显示数据。HTML 表格由多个表格单元格组成，每个单元格可以包含文本、图像、表单元素等内容。HTML 表格的基本结构由 `<table>` 标记定义...
一个html表单页面
Hsiao99的博客
04-17 4494
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <!--表单是html界面收集用户信息，并最后发送给服务器--> <!...
HTML总结之form表单和table表格
m0_74385608的博客
03-30 3437
因为最近在学习html所以就来聊聊两个比较重要的标签table与form。一、HTML是什么？HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元 素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是 由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。
HTML 表格
jiaomubai的博客
09-22 1091
html 表格
HTML系列之表格、表单综合案例
StayAlive1887的博客
07-01 1394
要求：用HTML实现下面的效果。要求：用HTML实现下面的效果。
HTML的Demo实例
二木成林
10-31 4299
Demo1 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo1</title> <style type="text/css"> * { margin: 0; pa...
Html表单与表格结合
weixin_45742613的博客
11-16 1512
表单、表格 html表单与表格的结合 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body&gt
【HTML — 构建网络】HTML 中的元数据
最新发布
07-24 907
这在很多方面都很有用。如果设置了 HTML 文档的语言（例如，允许其在特定语言的结果中正确显示），则搜索引擎将更有效地索引您的 HTML 文档，并且它对使用屏幕阅读器的视觉障碍者很有用（例如，“六”一词在法语和英语中都存在，但发音不同。的链接（如果您选择使用 CSS 设置HTML内容的样式）、指向自定义图标的链接以及其他元数据（有关HTML的数据，例如作者和描述文档的重要关键字）。指定包含与您的页面内容相关的关键字的描述很有用，因为它有可能使您的页面在搜索引擎执行的相关搜索中显示得更高（此类活动称为。
html表格
05-27
HTML表格是一种用于展示数据的标准化格式，可以使用HTML的<table>、<tr>、<td>等标签来创建表格。 以下是一个简单的HTML表格示例： ```html <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table> ``` 在上面的示例中，<table>标签定义了一个表格，<tr>标签定义了表格中的行，<td>标签定义了行中的单元格，<th>标签定义了表头单元格。通过使用这些标签，可以创建出一个包含多行和多列的表格。 HTML表格还支持合并单元格、添加边框、设置单元格宽度等操作，可以根据需要进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值