表单与表格练习

一.表格:

效果如下:

 代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="100%">
			<th colspan="6">营业收入交款单</th>
			<tr>
				<th colspan="2">交款单位</th>
				<th colspan="2"></th>
				<th>日期</th>
				<th></th>
			</tr>

			<tr>
				<th colspan="2">营业收入</th>
				<th colspan="3">人民币(大写)</th>
				<th>¥:</th>


			</tr>

		 <tr>
				<th colspan="2"></th>
				<th colspan="3">其中:</th>
				<th>备注</th>

			</tr>

			<tr>
				<th rowspan="9" colspan="2"></th>

			</tr>
			<tr>
				<td>现金</td>
				<td></td>
				<td>帐单数</td>
				<td></td>
			</tr>
			<tr>
				<td>银行卡</td>
				<td></td>
				<td>帐单数</td>
				<td></td>
				
			</tr>
			<tr>
				<td>代金券</td>
				<td></td>
				<td>帐单数</td>
				<td></td>
			
			</tr>
			<tr>
				<td>团购</td>
				<td></td>
				<td>帐单数</td>
				<td></td>
			
			</tr>
			<tr>
				<td>会员卡</td>
				<td></td>
				<td>帐单数</td>
				<td></td>
			
			</tr>
			<tr>
				<td>免单</td>
				<td></td>
				<td>帐单数</td>
				<td></td>
			
			</tr>
			<tr>
				<td>打折</td>
				<td></td>
				<td>帐单数</td>
				<td></td>
		
			</tr>
			<tr>
				<td>抹零</td>
				<td></td>
				<td>帐单数</td>
				<td></td>
			
			</tr>
			

		</table>

	</body>
</html>

二.表单

 代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>用户登录</title>
</head>
<body  >
	<form>
		<h1 align="center"><font size="7">用户登录</font></h1>
		<br>
		<fieldset>                          
		<legend><font size="5"><b>loding.....</b></font></legend> 
		<font size="5"><b>性别:</b></font><input type="radio" name="sex" value="女">女
				<input type="radio" name="sex" value="男">男
				<br>
				<br>
		<font size="5"><b>姓名:</b><input >
	 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
		<font size="5"><b>年龄:</b><input>
		<br>
		<br>
		<font size="5"><b>文化程度:</b></font>
		<select name="">
		<option  value="请选择">请选择</option>
		<option  value="小学">小学</option>
		<option value="初中">初中</option>
		<option value="高中">高中</option>
		<option value="大学">大学</option>
		<option value="研究生">研究生</option>
	</select>
		 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
		<font size="5"><b>职业:</b></font>
			<select name="">
			<option  value="请选择">请选择</option>
			<option  value="教育业">教育业</option>
			<option value="商业">商业</option>
			<option value="公务员">公务员</option>
			<option value="医疗">医疗</option>
			<option value="法律">法律</option>
			<option value="军人">军人</option>
			<option value="在读学生">在读学生</option>
		</select>
		 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
		<font size="5"><b>E-MAIL:</b></font><input type="email" name="mail"><br><br>
	
		<font size="5"><b>你的爱好:</b></font><br>
			<input  type="checkbox" name="action" value="吃大餐"><font size="5"><b>吃大餐</b></font><br>
			<input  type="checkbox" name="action" value="去看电影"><font size="5"><b>去看电影</b></font><br>
			<input  type="checkbox" name="action" value="去看风景"><font size="5"><b>去看风景</b></font><br>
			<input  type="checkbox" name="action" value="去逛夜市"><font size="5"><b>去逛夜市</b></font><br>
			<input  type="checkbox" name="action" value="去约会"><font size="5"><b>去约会</b></font><br>
			<input  type="checkbox" name="action" value="其他"><font size="5"><b>其他</b></font>
			<br><br>
		 
			<br>
			<input type="submit" name="" value="提交">
			<input type="reset" name="" value="重置">
		</fieldset>
	</form>
	</body>
	</html>

三.表格和div

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="500" border="0">
		<tr>
		<td colspan="2" style="background-color:#FFA500;">
		<h1><center>My html</center></h1>
		</td>
		</tr>
		<td><a href="https://music.163.com/#/song?id=475479888&market=baiduqk">音乐</a></td>
		<td><a href="https://www.baidu.com/?tn=02003390_33_hao_pg">百度</a></td>
		</table>
	</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

长街395

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值