html表格
table常用标签
1、table标签：声明一个表格
2、tr标签：定义表格中的一行
3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性：
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan 设置单元格水平合并
7、rowspan 设置单元格垂直合并
传统布局：
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
2、单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或者css样式设置单元格中元素的样式
传统布局目前应用：
1、快速制作用于演示的html页面
2、商业推广EDM制作(广告邮件)
table布局实例（个人简历页面布局实例）：
[图片上传失败...(image-88b6c9-1534985022209)]
表格常用样式属性
border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格
-
colspan水平合并之后把剩余的单元格删去：
colspan水平合并单元格
html表格实际应用——简历：
代码奉上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历布局</title>
</head>
<body>
<table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="260" valign="top" bgcolor="#f2f2f2">
<table width="260" border="0">
<tr height="100">
<td></td>
<td></td>
</tr>
<tr>
<td width="230" align="right"><img src="images/person.png" alt="人物图片"></td>
<td width="30"></td>
</tr>
<tr>
<td align="right">张达山</td>
<td></td>
</tr>
<tr>
<td align="right">18210898888</td>
<td></td>
</tr>
<tr>
<td align="right">zhangdasan@126.com</td>
<td></td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="480" >
<tr>
<td height="75"></td>
</tr>
<tr>
<td align="right"><img src="images/resume.png"></td>
</table >
<hr />
<table border="0" cellpadding="0" cellspacing="0" width="480" height="180">
<tr height="30">
<td></td>
</tr>
<tr>
<td colspan="2"><b>个人基本情况</b></td>
</tr>
<tr>
<td width="50%"><b>姓 名：</b>张达山
</td>
<td width="50%"><b>籍 贯：</b>北京昌平</td>
</tr>
<tr>
<td><b>性 别：</b>男</td>
<td><b>身 高：</b>175cm</td>
</tr>
<tr>
<td><b>民 族：</b>汉</td>
<td><b>体 重：</b>70kg</td>
</tr>
<tr>
<td><b>出生日期：</b>1992.03.28</td>
<td><b>电 话：</b>18210898888</td>
</tr>
<tr>
<td><b>专 业：</b>工业设计</td>
<td><b>现居住地：</b>昌平天通苑</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="480" height="125">
<tr height="30"></tr>
<tr>
<td colspan="2"><b>教育背景及工作经历</b></td>
</tr>
<tr>
<td><b>2008.09-2011.06 </b>北京邮电大学 工业设计专业</td>
</tr>
<tr>
<td><b>2011.06-2012.09 </b>北京微创信息科技有限公司 任前端开发工程师</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="480" height="125">
<tr height="30"></tr>
<tr>
<td colspan="2"><b>所获证书</b></td>
</tr>
<tr>
<td><b>2009年</b>荣获“高级美术设计师”证书</td>
</tr>
<tr>
<td><b>2009年：</b>荣获“优秀班干部”证书</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="480" height="125">
<tr height="30"></tr>
<tr>
<td><b>自我评价</b></td>
</tr>
<tr>
<td>已积累一定数量中小型项目开发经验。能很好地带领一个团队完成任务。有较强的自主编程能力及团队合作，团队交流能力。善于快速学习并使用新技术。对工作充满热情，从未试图抱怨，一直努力改变。</td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</body>
</html>
显示效果：
html简历显示效果
网友评论