html制作表格（个人简历）
初步学习前端的萌新，记录自己学习的足迹。
html制作表格使用<table>标签，table标签里又有定义行的<tr>标签，和定义列的<td>标签，这三个都是闭合标签。期中三者的嵌套关系为“<table> > <tr> = <td>”。在制作表格时，还可以通过“height”和“width”来定义单元格的高度和宽度，并且也能够使用css来进行修饰。
下面制作一张个人简历的表格。
中border属性定义了边框，通常数值为1，cellspacing设置的时单元格间距，当cellspacing等于0时单元格间距为0，单元格之间只有一条线，如果设置了间距，那么就有两条线，并且其宽度随着设置的值成正比。
colspan 和 rowspan属性则是用于进行合并单元格的，colspan列合并，rowspan行合并，合并的时候行列的长度一定要和原始表格一致，否则会有错。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="PWJBL">
<title>简历（合并单元格）</title>
</head>
<body>
<h1>制作简历</h1>
<p>合并单元格</p>
<table border="1px" cellspacing="0">
<col width = "100px"><!--设置每一列的宽度为100px，因为是6x7的表格，设置了7列的宽度-->
<col width = "100px">
<col width = "100px">
<col width = "100px">
<col width = "100px">
<col width = "100px">
<col width = "100px">
<col width = "150px"><!--因为最后一列要放置照片，所以设宽了一些-->
<tr height = 40px>
<td colspan="7">个人简历</td><!--表头独占7列-->
</tr>
<tr height = 40px><!--每一行设置高度为40px-->
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="3">照片</td><!--这一单元格设置为三行的高度-->
</tr>
<tr height = 40px>
<td>籍贯</td>
<td></td>
<td>学历</td>
<td colspan="3"></td><!--这一单元格设置为三列的宽度-->
</tr>
<tr height=40px>
<td>电话</td>
<td></td>
<td>政治相貌</td>
<td colspan="3"></td>
</tr>
<tr height=40px>
<td>毕业院校</td>
<td colspan="6"></td>
</tr>
<tr height=40px>
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
最终制作效果如下：
扫一扫
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
