表格表单

最新推荐文章于 2024-10-02 23:31:06 发布
最新推荐文章于 2024-10-02 23:31:06 发布
阅读量97 收藏
点赞数
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40805072/article/details/104941504
版权

一、要求实现如图

<!DOCTYPE html>
<html>
<head>
	<title>Hello</title>
	<style type="text/css">
table
{text-align :center;
font-family: "宋体"}
</style>
</head>
<body>
	<div align="center" vertical-align="middle">课程表</div>
	 <table width="500px"  border="1" align="center"  style="border-collapse:collapse;" >
	 		<tr bgcolor="BlanchedAlmond ">
		 		<td>星期一</td>
		 		<td>星期二</td>
		 		<td>星期三</td> 
		 		<td>星期四</td>
		 		<td>星期五</td>
	 		</tr>
	 
		 	<tr>
		 		<td rowspan="2">语文</td>
		 		<td>数学</td>
		 		<td>化学</td>
		 		<td>英语</td>
		 		<td>生物</td>
		 	</tr>
		 	<tr> 
		 		<td>数学</td>
		 		<td>化学</td>
		 		<td>英语</td>
		 		<td>生物</td>
		 	</tr>
		 	<tr>
		 		<td colspan="5" align="center">课间活动</td>
		 	</tr>
		 	<tr>
		 		<td>语文</td>
		 		<td>数学</td>
		 		<td>化学</td>
		 		<td>英语</td>
		 		<td>生物</td>
		 	</tr>
		 	<tr>
		 		<td>语文</td>
		 		<td>数学</td>
		 		<td>化学</td>
		 		<td>英语</td>
		 		<td>生物</td>
		 	</tr>	
			 	 	 	
	 </table>
</body>
</html>

代码结果

二、表单

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>fuck</title>
</head>
<body>
	 <form action="#" method="post">
	 	<label> please input your name:</label>
	 		<input type="text" name="" id=""><br>
	 	<label>please input your password:</label>
	 		<input type="password" name="" id=""><br>
	 	<label>please again input your password:</label>
	 		<input type="password" name="" id=""><br>
	 	<label>gender:</label>
	 		<input type="radio" name="gender" value="1">man
	 		<input type="radio" name="gender" value="0">women
	 		<br>
	 	<label>hobbies:</label>
	 		<input type="checkbox" name="" id="" value="1">swim
	 		<input type="checkbox" name="" id="" value="2">read
	 		<input type="checkbox" name="" id="" value="3">run
	 		<br>
	 	<label>birthday:</label>
	 		<select>
	 			<option value="1998" selected="selected">1998</option>
	 			<option value="1999">1999</option>
	 			<option value="2000">2000</option>
	 			<option value="2001">2001</option>
	 			<option value="2002">2002</option>
	 			<option value="2003">2003</option>
	 		</select>年
	 		<select>
	 			<option value="1">1</option>
	 			<option value="2">2</option>
	 			<option value="3">3</option>
	 			<option value="4">4</option>
				<option value="5">5</option>
	 			<option value="6">6</option>
	 			<option value="7">7</option>
	 			<option value="8">8</option>
	 			<option value="9">9</option>
	 			<option value="10">10</option>
	 			<option value="11">11</option>
	 			<option value="12">12</option>
	 		</select>月
	 		<select>
	 			<option value="1">1</option>
	 			<option value="2">2</option>
	 			<option value="3">3</option>
	 			<option value="4">4</option>
				<option value="5">5</option>
	 			<option value="6">6</option>
	 			<option value="7">7</option>
	 			<option value="8">8</option>
	 			<option value="9">9</option>
	 			<option value="10">10</option>
	 			<option value="11">11</option>
	 			<option value="12">12</option>
	 			<option value="13">13</option>
	 			<option value="14">14</option>
	 			<option value="15">15</option>
	 			<option value="16">16</option>
				<option value="17">17</option>
	 		</select>日
	 		<br>
	 		picture:<img src="image/2.jpg" height="25" width="25">
	 		<select>
	 			<option value="1">1</option>
	 			<option value="2">2</option>
	 			<option value="3">3</option>
	 			<option value="4">4</option>
	 		</select>
	 		<br>
	 		<input type="submit" value="submit" name="submit">
	 		<input type="button" value="reset" name="button">
	 </form>
	 <textarea rows="10" cols="30" name="" id="">please b b</textarea>
	 <input type="file" name="" value="">
	 <input type="button" name="" value="upload">
	 <br>
	 000<input type="hidden" name="" id="">000
	 		<select size="4" multiple="true">
	 			<option value="1">1</option>
	 			<option value="2">2</option>
	 			<option value="3">3</option>
	 			<option value="4">4</option>
				<option value="5">5</option>
	 			<option value="6">6</option>
	 			<option value="7">7</option>
	 			<option value="8">8</option>
	 			<option value="9">9</option>
	 		</select>	 
	 		<select size="4" multiple="true">
	 		</select>	
</body>
</html>

三、二中组件较乱，此处通过表格来实现对齐

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>register</title>
</head>
<body>
	<form action="" method="post">
	<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="gender" value="1" checked="checked">男
	 			<input type="radio" name="gender" value="0">女
	 		</td>
		</tr>	
		<tr>
			<td align="right">爱好:</td>
			<td><input type="text" name="" id="">
				<input type="checkbox" name="" id="" value="1">游泳
		 		<input type="checkbox" name="" id="" value="2">阅读
		 		<input type="checkbox" name="" id="" value="3">跑步
	 	</td>

		</tr>
		<tr>
			<td align="right">生日:</td>
			<td>
				<select>
	 			<option value="1998" selected="selected">1998</option>
	 			<option value="1999">1999</option>
	 			<option value="2000">2000</option>
	 			<option value="2001">2001</option>
	 			<option value="2002">2002</option>
	 			<option value="2003">2003</option>
	 		</select>年
	 		<select>
	 			<option value="1">1</option>
	 			<option value="2">2</option>
	 			<option value="3">3</option>
	 			<option value="4">4</option>
				<option value="5">5</option>
	 			<option value="6">6</option>
	 			<option value="7">7</option>
	 			<option value="8">8</option>
	 			<option value="9">9</option>
	 			<option value="10">10</option>
	 			<option value="11">11</option>
	 			<option value="12">12</option>
	 		</select>月
	 		<select>
	 			<option value="1">1</option>
	 			<option value="2">2</option>
	 			<option value="3">3</option>
	 			<option value="4">4</option>
				<option value="5">5</option>
	 			<option value="6">6</option>
	 			<option value="7">7</option>
	 			<option value="8">8</option>
	 			<option value="9">9</option>
	 			<option value="10">10</option>
	 			<option value="11">11</option>
	 			<option value="12">12</option>
	 			<option value="13">13</option>
	 			<option value="14">14</option>
	 			<option value="15">15</option>
	 			<option value="16">16</option>
				<option value="17">17</option>
	 		</select>日
			</td>			
		</tr>	
		<tr>
			<td align="right">头像:</td>
			<td>
				picture:<img src="image/2.jpg" height="25" width="25">
	 			<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" name="register" value="注册">
				<input type="reset" name="reset" value="重置">
			</td>
		</tr>			
	</table>
 </form>
</body>
</html>

weixin_40805072
关注
专栏目录
HTML表格表单
qq_55636063的博客
05-08 1615
HTML表格表单
HTML表格表单以及列表
lh11223326的博客
03-31 1873
标签是用来定义表格的。定义完之后发现其结构和Excel的标签是非常相似的，都有行，列，单元格，表头等等，但是Excel毕竟还是专业，不像HTML既不支持排序又不支持求和，还不支持很多数学计算，只能用来展示数据。HTML常用的图片标签和超链接标签-CSDN博客HTML常用文本标签-CSDN博客：表示表格，表格的所有内容需要写在和
Web前端——表格表单练习
qq_53715074的博客
11-10 2302
要求： 网页源代码： 网页效果图： 要求： 网页源代码： 网页效果图： 要求： 网页源代码： 网页效果图：
CSS表格和表单
『愚』的博客
11-03 5958
CSS表格和表单表格-table表单-form 表格-table 我们想象中的表格是这样的↓ 图片 我们想要在html中制造出这样的表格，就需要使用table，tr，td，caption，th这些标签 table标签（表格） tr标签（行） td标签（标准单元格） caption标签（标题） th标签（表头单元格） 为了更深一层对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分：表头、表身、表脚。 标签 说明 table 表格 c
elementui表格嵌套表单
weixin_43937400的博客
10-21 4969
表格嵌套表单并触发校验的案例
html 关于表格表单的总结
asdsdsd25的博客
02-22 2248
、创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr> ...</table> 在上面的语法中包含三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释。 1.table用于定义一个表格。 2.tr 用于定义表格中的一...
表格与表单
ccyzq的博客
12-14 1734
文章目录前言一、表格< table>二、表单< form> 前言 观察每个网页，或多或少都可以看到表格、表单的存在，例如登陆界面等等，表格多用于局部布局排版，表单用于向服务器发送数据。 一、表格< table> 表格 二、表单< form> ...
HTML表格表单制作
weixin_41534129的博客
02-28 7599
1.数据表格的作用及组成 作用：显示数据，展示数据 组成： <table>用于定义表格的标签 <tr>行 <th>内容<th>表头单元格 <td>内容</td>单元格 <td>内容<td>单元格 .... <tr> </table> 1.<table&gt...
HTML 表格 表单的制作
m0_60045654的博客
10-21 7096
表格是一种二维结构，横行纵列。表格由单元格组成。每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高。从服务器角度讲，收集用户的输入数据。从客户端角度来讲，向服务器提交数据的位置。本站搜索<input type="submit" name="button" id="button" value="搜索"></form>
HTML简单表格表单设计实验（含代码）
bruuuuuuuuno的博客
06-27 3714
目录目的和要求内容和步骤代码货品价格表用户留言表单心得体会 目的和要求 掌握 HTML 语言的使用，例如：TABLE、FORM、FRAME、CSS 等。 必须使用到 CSS。 必须有 HTML5 元素。 电子邮件输入框必须有邮件格式输入验证，采用客户端验证方法。 内容和步骤 1、创建如下图所示的货品价格表： 2、创建如下图所示的用户留言表单： 代码 货品价格表 <!DOCTYPE html> <html lang="en"> <head> <meta c
el-table树形表格表单验证(列表生成序号)
10-15
在本文中，我们将深入探讨如何在使用Element Plus的`el-table`组件实现树形表格时进行表单验证以及如何生成序号。`el-table`是一个强大的数据展示组件...结合这两个方面，可以构建出高效且健壮的树形表格表单验证系统。
ITextSharp教程用C#制作PDF复杂表格表单
07-04
ITextSharp 教程用 C# 制作 PDF 复杂表格表单 ITextSharp 是一个流行的 PDF 处理库，它提供了创建和处理 PDF 文件的功能。今天，我们将学习如何使用 ITextSharp 在 C# 中创建一个复杂的表格表单，包括照片。 why ...
html学习【（案例）用文本编辑器打开能看到知识点】包括表格表单等
10-19
这个压缩包中的资源着重于HTML的基础结构，特别是表格、表单以及锚点、`input`和`button`元素的使用。以下是对这些知识点的详细说明： 1. **HTML表格**：HTML中的表格由`<table>`标签开启，`</table>`标签闭合。...
HTML 与 ES6 是前端开发的两大核心技术
qq_25416827的博客
10-02 529
HTML：主要负责页面的结构、语义化、布局和多媒体处理。ES6：提高了 JavaScript 的开发效率和可读性，尤其是模块化、异步编程和数据处理方式的革。
HTML粉色烟花秀
兔子王
09-21 8284
HTML语言实现的粉红色跨年烟花秀的完整代码。
关于HTML 案例_个人简历展示02
Dingyuan0的博客
09-29 1091
展示效果 用table进行布局 label 标签进行关联 例如：点姓名就可以到text中去填写内容 input的使用 text 文本框 select与option 选择框 checkbox 复选框 textarea ul与li 无序列表 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
好玩的水表电表
lulei5153的博客
10-01 625
【代码】好玩的水表电表。
用HTML CSS JS打造企业级官网-源码直接可用
最新发布
qiao_yue的博客
10-02 692
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
【html】基础（二）
小小unicorn的博客
09-24 945
【html】基础（二）
javaweb表格表单居中
05-25
要使表格和表单居中，可以使用CSS样式。以下是一个简单的示例： ```html <!DOCTYPE html> 居中表格和表单 table, form { margin: 0 auto; /* 水平居中 */ } 标题1 标题2 标题3 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值