HTML创建简历表格
table常用标签
1、table标签:声明一个表格
table常用标签
2、tr标签:定义表格中的一行
3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格
table常用属性
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样式设置单元格中元素的样式
表格常用样式属性
需要制作表格样例:
-
基本情况 姓名 性别 照片 民族 出生日期 政治面貌 健康情况 籍贯 学历 电子信箱 联系电话
代码实现表图如下:
HTML代码如下:
<!DOCTYPE html>
<html>
<head>
</head>
<body >
<table border="2" width="500" height="300"> <!--边框深度,宽度,高度-->
<tr><!--每一行开始标签-->
<th colspan="5" align="left" valign="middle"><b>基本情况</b></th>
<!--水平跨五个格子 ,内容水平靠左 ,内容垂直对齐-->
<!--th 表示表头-->
</tr>
<tr>
<!--td表示一行中一个小格子 ,width=“n%”表示这一列宽度占总宽度的%多少-->
<td width="18%">姓名</td>
<td width="18%"></td>
<td width="18%">性别</td>
<td width="18%"></td>
<td rowspan="5" width="28%" align="middle" > 照片</td>
<!--rowspan表示本格子所在垂直这一列5个格子合并一个新的格子 , align表示内容水平居中-->
</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>