web前端开发第一阶段——表格样式

最新推荐文章于 2024-05-06 11:02:16 发布

资本理念

最新推荐文章于 2024-05-06 11:02:16 发布

阅读量439

点赞数 1

分类专栏： web前端笔记总结

本文链接：https://blog.csdn.net/qq_43151638/article/details/102779752

版权

web前端笔记总结专栏收录该内容

78 篇文章 1 订阅

订阅专栏

table

thead
tbody
tfoot
	tr
		th/td

table专有属性：

这是在页面添加的
1.border
2.cellspacing:单元格边框之间的距离
3.cellpadding
th/td:corspan rowspan

css文件样式

1.border-spacing:单元格边框之间的距离（采用）
2.border-collapse:collapse边框重叠
3.tr/td设置width/height
4.text-align
5.font-weight
6.background：背景颜色
7.visibility:hidden

table练习代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

	<!-- 作业 -->
	<table border="1" cellpadding="0" cellspacing="0">
		<tr>
			<th width="" colspan="6" height="40">个人求职简历</th>
		</tr>
		<tr>
			<th width="160" height="30">姓名</th>
			<td width="180"></td>
			<th width="180">性别</th>
			<td width="200" colspan="2"></td>
			<td width="170" rowspan="7"></td>
		</tr>
		<tr>
			<th height="30">年龄</th>
			<td></td>
			<th>出生日期</th>
			<td colspan="2"></td>
		</tr>
		<tr>
			<th height="30">所在城市</th>
			<td></td>
			<th>从事行业</th>
			<td colspan="2"></td>
		</tr>
		<tr>
			<th height="30">学历</th>
			<td></td>
			<th>民族</th>
			<td colspan="2"></td>
		</tr>
		<tr>
			<th height="30">婚姻状况</th>
			<td></td>
			<th>身份证</th>
			<td colspan="2"></td>
		</tr>
		<tr>
			<th height="30">籍贯</th>
			<td></td>
			<th>户口所在地</th>
			<td colspan="2"></td>
		</tr>
		<tr>
			<th height="30">毕业学校</th>
			<td></td>
			<th>计算机能力</th>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td colspan="6" height="30"></td>
		</tr>
		<tr>
			<th rowspan="3">家庭成员</th>
			<th height="30">姓名</th>
			<th colspan="2">成员关系</th>
			<th>职务</th>
			<th>工作单位</th>
		</tr>
		<tr>
			<td height="30"></td>
			<td colspan="2"></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td height="30"></td>
			<td colspan="2"></td>
			<td></td>				
			<td></td>
		</tr>
		<tr>
			<td colspan="6" height="30"></td>
		</tr>
		<tr>
			<th height="30" rowspan="5">工作经历</th>
			<th>工作时间</th>
			<th colspan="2">公司名称</th>
			<th>职位名称</th>
			<th>所属部门</th>
		</tr>
		<tr>
			<td height="30"></td>
			<td colspan="2"></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td height="30" rowspan="2"></td>
			<td colspan="2" rowspan="2"></td>
			<td height="30"></td>
			<td></td>				
		</tr>
		<tr>
			<td height="30"></td>
			<td></td>								
		</tr>
		<tr>
			<td height="30"></td>
			<td colspan="2"></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="6" height="30"></td>
		</tr>
		<tr>
			<th height="30" rowspan="2">教育情况</th>
			<th height="30">时间</th>
			<th colspan="2">学校</th>
			<th colspan="2">学历</th>
		</tr>
		<tr>
			<td height="30"></td>
			<td colspan="2"></td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td colspan="6" height="30"></td>
		</tr>
		<tr>
			<th height="30" rowspan="2">培训经历</th>
			<th height="30">培训时间</th>
			<th colspan="2">培训机构</th>
			<th colspan="2">培训内容</th>
		</tr>
		<tr>
			<td height="30"></td>
			<td colspan="2"></td>
			<td colspan="2"></td>
		</tr>						
	</table>
</body>
</html>

资本理念

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端开发第一阶段——表格样式

tabletheadtbodytfoot tr th/tdtable专有属性：这是在页面添加的1.border2.cellspacing:单元格边框之间的距离3.cellpaddingth/td:corspan rowspancss文件样式1.border-spacing:单元格边框之间的距离（采用）2.border-collapse:collapse边框重叠3...
复制链接

扫一扫