该文章用于记录实训中的一个小作业
table标签的使用
从名字中可以看出table标签在HTML中，table标签多用于制作表格。
table结构中有多个子标签
caption 用于标明该表格的使用途径或者说是表达该表格是什么类型的表，例如成绩表，或购物清单等等，利用align属性可以将caption放在上面或是（左，右，底部），在这个作业中制作的是简历，那么就用<caption>个人简历</caption>来放在table标签里面。
tr，tr代表的是table row 即为表格中的一行，
th，table head 表头，用于放在顶部，显示表格信息，
td,表格的单元格
除此之外，还有thead,tbody,tfooter,分别表示表格的头部，表体，表尾，
以下为table的简单格式
<table>
<caption>XXX</caption>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>table还有合并单元格的功能
rowspan属性用于行合并
colspan属性用于列合并
以表格的左边，上边开始合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border-collapse: collapse;
/* width: 590px; */
}
td{
width: 75px;
height: 40px;
border: 1px solid black;
text-align: center;
}
.pic{
height: 180px;
}
</style>
</head>
<body>
<table align="center">
<caption>个人简历</caption>
<tr>
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>出生年月</td>
<td></td>
<td rowspan="3" colspan="2" class="pic"><img src="img/20220714112407.jpg" alt="" width="150" height="180"></td>
<!-- <td>照片</td> -->
</tr>
<tr>
<td>籍贯</td>
<td></td>
<td>民族</td>
<td></td>
<td>身高</td>
<td></td>
<!-- <td>照片</td> -->
<!-- <td>照片</td> -->
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>学历</td>
<td></td>
<td>职业资格</td>
<td></td>
<!-- <td>照片</td> -->
<!-- <td>照片</td> -->
</tr>
<tr>
<td rowspan="2">家庭地址</td>
<td rowspan="2" colspan="2"></td>
<!-- <td></td> -->
<td colspan="2">联系电话</td>
<!-- <td>联系电话</td> -->
<td colspan="3"></td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr>
<!-- <td>家庭地址</td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<td colspan="2">E-mail</td>
<!-- <td>E-mail</td> -->
<td colspan="3"></td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr style="height:100px ;">
<td>项目经历</td>
<td colspan="7"></td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<!-- <td>项目经历</td> -->
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<!-- <td>项目经历</td> -->
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr style="height: 100px;">
<td>在校经历</td>
<td colspan="7"></td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr style="height: 100px;">
<td>个人掌握技能</td>
<td colspan="7"></td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr style="height: 100px;">
<td>教育背景</td>
<td colspan="7"></td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
</table>
</body>
</html>
更多推荐
HTML 用table标签制作一张简单的个人简历
发布评论