html 表格

原创 2016年08月28日 23:19:33
<!DOCTYPE html>
<html>
	<!--
    	作者:xwl281928290@163.com
    	时间:2016-07-25
    	描述:
    	<span style="color:#006600;">
	 border:设置表格线的宽度
	 width:设置表格宽度
	 height:设置表格高度
	 cellpadding:设置表格内文字距离左边宽度
	 cellspacing:设置表格线与线的间距
	 bgcolor:设置表格背景颜色
	 caption:设置表格标题头
	 align: left center right
	 		1  在table上 设置表格 左  中 右 
	 		2  在tr上 设置行 内文字 左 中 右
	 		3 在td上 设置列 内 文字 左 中 右
	 rowspan:纵向合并
	 colspan:横向合并</span>
	 
	-->
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<fieldset>
			<legend>这个一个表格</legend>
			<table border="1" width="400" height="200" cellpadding="10" cellspacing="0" bgcolor="palevioletred"
				align="center">
				<caption>人员信息</caption>
				<tr>
					<th >老师</th>
					<th >学生</th>
					<th >工人</th>
				</tr>
				<tr align="center">
					<td>小命</td>
					<td>校长</td>
					<td>小李</td>
				</tr>
				<tr align="center"> 
					<td>张飞</td>
					<td>李四</td>
					<td>王五</td>
				</tr>
			</table>
		
		</fieldset> <hr><hr>
		
		<table border="1" width="400" height="200"  cellspacing="0" bgcolor="palevioletred"
			align="center">
			<thead>
				<tr align="center">
					<td>小命</td>
					<td>校长</td>
					<td>小李</td>
				</tr>
			</thead>
			
			<tbody>
				<tr align="center">
					<td>小命</td>
					<td>校长</td>
					<td>小李</td>
				</tr>
				<tr align="center"> 
					<td>张飞</td>
					<td>李四</td>
					<td>王五</td>
				</tr>
			</tbody>
			
			<tfoot>
				<tr align="center"> 
					<td>张飞</td>
					<td>李四</td>
					<td>王五</td>
				</tr>
			</tfoot>
			
		</table><hr><hr>
		
		<table border="1" width="400" height="300"  bgcolor="pink" cellspacing="0" align="center">
			<tr>
				<td rowspan="2"></td>
				<td></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td ></td>
				<td></td>
				<td></td>
				<td rowspan="2"></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td ></td>
			</tr>
		</table>
		
		<hr />
		<table border="1" width="400" height="300"  bgcolor="pink" cellspacing="0" align="center">
			<tr>
				<td rowspan="2"></td>
				<td></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<!--<td></td>-->
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td rowspan="2"></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<!--<td ></td>-->
				<td></td>
				<!--<td></td>-->
			</tr>
		</table>
		
		<table width="400" height="300" bgcolor="green" cellspacing="1">
				<tr bgcolor="white" align="center" >
					<th colspan="2" width="100"></th>
					<!--<th></th>-->
					<th>星期一</th>
					<th>星期二</th>
					<th>星期三</th>
					<th>星期四</th>
					<th>星期五</th>
				</tr>
			
				<tr bgcolor="white" align="center">
					<td rowspan="2">上午</td>
					<td>1</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				
				<tr bgcolor="white" align="center">
					<!--<td></td>-->
					<td>2</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				
				<tr bgcolor="white"  align="center">
					<td rowspan="2">下午</td>
					<td>3</td>
					<td></td>
					<td></td>
					<td ></td>
					<td colspan="2" ></td>
					<!--<td></td>-->
				</tr>
				
				<tr bgcolor="white" align="center">
					<!--<td></td>-->
					<td>4</td>
					<td></td>
					<td></td>
					<td></td>
					<td colspan="2" ></td>
					<!--<td></td>-->
				</tr>
		</table>
		<a href="#momo">锚链接</a>
		<table width="400" height="300" bgcolor="green" cellspacing="1">
				<tr bgcolor="white" align="center" >
					<th colspan="2" rowspan="2"></th>
				</tr>
				<tr bgcolor="white" align="center" >
					<th colspan="2" rowspan="2"></th>
				</tr>
		</table><hr>
		
		
		<table width="400" height="300" bgcolor="green" cellspacing="1">
				<tr bgcolor="white" align="center" >
					<td rowspan="2"></td>
					<td colspan="2"></td>
				</tr>
				<tr bgcolor="white" align="center" >
					<!--<td></td>-->
					<!--<td></td>-->
				</tr>
		</table>
		
		
		<table id="momo" border="1"  width="600" height="500" bgcolor="pink" cellspacing="1">
			 <tr>
			 	<td colspan="2"></td>
			 	<!--<td></td>-->
			 	<td>星期一</td>
			 	<td>星期二</td>
			 	<td>星期三</td>
			 	<td>星期四</td>
			 	<td>星期五</td>
			 </tr>
			 <tr>
			 	<td rowspan="2">上午</td>
			 	<td width="50">1</td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 </tr>
			 <tr>
			 	<!--<td></td>-->
			 	<td>2</td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 </tr>
			 <tr>
			 	<td rowspan="2">下午</td>
			 	<td>3</td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td colspan="2"></td>
			 	<!--<td></td>-->
			 </tr>
			 <tr>
			 	<!--<td></td>-->
			 	<td>4</td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 </tr>
		</table>
		
		
	</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

变化多端 – 多种纯CSS的HTML表格设计

介绍 在HTML中,Table节点由于其层层嵌套的节点结构,一度名声很臭,且一度被呼吁用DIV+CSS取而代之。但在实际项目开发中,一碰到规整的数据显示,不知不觉又会用起它。可见其生命力之顽强。 这...
  • eengel
  • eengel
  • 2015年08月03日 20:00
  • 14373

html的下拉列表和表格

html的下拉列表和表格 总结: 今日所学有:文件选择框、 下拉列表、textarea标签、fieldset标签、隐藏域、表格等。 1.文件选择框  选择你的头像:input type="fi...
  • mengjavakaifa
  • mengjavakaifa
  • 2017年07月10日 20:29
  • 1842

HTml的表格创建

1.创建基本的表: 你好,html 1-1 1-2 2-1 2-2 2.单元格的合并: 行合并: 你好,html ...
  • wxcszrp
  • wxcszrp
  • 2016年07月09日 14:58
  • 393

纯css打造漂亮的html表格

纯css漂亮表格制作兼容各种版本浏览器
  • house_of_web
  • house_of_web
  • 2016年04月14日 15:54
  • 8541

漂亮的html表格源码

表格测试 table{ border-collapse:collapse;border:solid 1px #ccc;width:600px;} td{ border:solid 1px #ccc;...
  • chenyefei
  • chenyefei
  • 2016年05月26日 22:36
  • 1265

轻松解决HTML + CSS各种表格问题

表格那些事:简单复杂的表格样式,高度固定表头固定,横向滚动条等。
  • shenmill
  • shenmill
  • 2016年08月07日 21:27
  • 714

html表格样式

本文导读:CSS表格与表单是网页上最常见的元素,表格除了显示数据外,还常常被用来排版。CSS表格作为传统的HTML元素,一直受到网页设计者们的青睐。使用CSS表格来表示数据、制作调查表等在网络中屡见不...
  • flyyhz
  • flyyhz
  • 2016年07月28日 16:56
  • 2228

html 表格小demo

学生成绩 张三 语文 85 数学 96
  • u010467582
  • u010467582
  • 2015年09月07日 08:54
  • 270

html表格模板,可扩展,很好用(内容来自互联网)

http://www.w3.org/TR/html4/loose.dtd"> Insert title here         列值     整数一     整数二     总和   ...
  • C_XC_
  • C_XC_
  • 2014年12月15日 19:41
  • 1597

html 如何合并表格

html 如何合并表格基础
  • liusslove
  • liusslove
  • 2016年10月25日 21:22
  • 9008
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html 表格
举报原因:
原因补充:

(最多只允许输入30个字)