HTML学习--表格的制作及相关知识

表格的建立

锚点

HTML Day01 补充添加内容

		<!-- 定义到锚点时需要href="#锚点名" -->
		<!-- name="锚点名"-->		

		<a name="top"></a>
		<td><a href="#P1">产品1</a></td>
		<td><a href="#P2">产品2</a></td>
		<td><a href="#P3">产品3</a></td>
		<td><a href="#P4">产品4</a></td>
		<td><a href="#P5">产品5</a></td>


		<hr />
		<h3><a name="P1">产品1</a></h3>
		<img src="../1.png" />
		<h3><a name="P2">产品2</a></h3>
		<img src="../2.png" />
		<h3><a name="P3">产品3</a></h3>
		<img src="../3.png" />
		<h3><a name="P4">产品4</a></h3>
		<img src="../4.png" />
		<h3><a name="P5">产品5</a></h3>
		<img src="../5.png" />
		<hr />

		<h3 align="right"><a href="#top">返回顶部</a></h3>

表格制作(简历表)

	<!--
	快速建表:
	table>tr*4>td*4(按table键) 快速建立四行四列表格
	<table></table>标签,在网页中开辟空间
	<tr></tr>:表格中的行  
	行高设定:height="number"
	<th>表头</th>:表格的表头(字体自动加粗居中)
	行宽设定:width="number"
	<td>内容</td>:表格中的单元格
	注意:表格中的内部必须写在单元格中
	
	表格中用到的属性:
	background="img/ " 添加背景图片
	bgcolor=" "  背景颜色
	border="number"    将表格的线显现出来
	cellpadding="值" 距边框的距离即内边距
	cellspacinh="值" 标签间的距离即外边距
	align="left,center,right" 水平位置
	valign="top,middle,botton" 垂直位置的设定
	
	单元格的合并:
	注意:从哪个单元格开始合并,就写在哪个中
	colspan="4(值)"  属性,列合并,一列顶四列
	rowspan="4(值)"  属性,行合并,一行顶四行
	-->

	<table border="1" cellspacing="0" width="800" height="1000">
		<tr>
			<th height="30" bgcolor="aqua">姓名</th>
			<th width="150"></th>
			<th width="70" bgcolor="aqua">性别</th>
			<th></th>
			<th rowspan="5" width="180" bgcolor="aqua">照片</th>
		</tr>
		<tr>
			<th height="30" bgcolor="aqua">出生年月</th>
			<th></th>
			<th bgcolor="aqua">籍贯</th>
			<th></th>
		</tr>
		<tr>
			<th height="30" bgcolor="aqua">政治面貌</th>
			<th></th>
			<th bgcolor="aqua">民族</th>
			<th></th>
		</tr>
		<tr>
			<th height="30" bgcolor="aqua">健康状况</th>
			<th></th>
			<th bgcolor="aqua">婚姻状况</th>
			<th></th>
		</tr>
		<tr>
			<th height="30" bgcolor="aqua">联系电话</th>
			<th></th>
			<th bgcolor="aqua">电子邮件</th>
			<th>www.51jianli.com</th>
		</tr>
		<tr>
			<th height="30" bgcolor="aqua">求职意向</th>
			<th colspan="4"></th>
		</tr>
		<tr>
			<th height="150" bgcolor="aqua">工作经历</th>
			<th colspan="4"></th>
		<tr>
			<th height="50" bgcolor="aqua">教育经历</th>
			<th colspan="4"></th>
		</tr>
		<tr>
			<th height="50" bgcolor="aqua">英语水平</th>
			<th colspan="4"></th>
		</tr>
		<tr>
			<th height="50" bgcolor="aqua">计算机水平</th>
			<th colspan="4"></th>
		</tr>
		<tr>
			<th height="50" bgcolor="aqua">自我评价</th>
			<th colspan="4"></th>
		</tr>
	</table>

实现效果

总结

 1.锚点的设定:
 	name="锚点名"
 2.锚点使用在超链接中: 
 	<a href="#锚点名"> </a>
 3.快速建表:
	table>tr*4>td*4(按table键) 快速建立四行四列表格
 4.建表:
	<table></table>标签,在网页中开辟空间
 5.表格中的行  
	<tr></tr>:
	行高设定:height="number"
 6.表格的表头
	<th>表头</th>:(字体自动加粗居中)
	行宽设定:width="number"
	<td>内容</td>:表格中的单元格
注意:表格中的内部必须写在单元格中

7.表格中的属性:
	background="img/ " 添加背景图片
	bgcolor=" "  背景颜色
	border="number"    将表格的线显现出来
	cellpadding="值" 距边框的距离即内边距
	cellspacinh="值" 标签间的距离即外边距
	align="left,center,right" 水平位置
	valign="top,middle,botton" 垂直位置的设定

8.单元格的合并:
	注意:从哪个单元格开始合并,就写在哪个中
	列合并 colspan="值" 
	行合并 rowspan="值"