web前端从零开始学习（html5) 四

最新推荐文章于 2024-07-24 17:02:26 发布

小丑尽欢

最新推荐文章于 2024-07-24 17:02:26 发布

阅读量108

点赞数

分类专栏： web前端文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_43799332/article/details/113179306

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

终身学习
学习视频：b站千峰教育web前端教程
纸上得来终觉浅，绝知此事要躬行！
一.简单表格的制作
1.建立目录006简单表格的制作
2.建立文件index.html
3。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>前端技术阶段划分标准</h3>
		<table border="1px" cellspacing="0">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<tr align="center">
				<td></td>
				<td>初级</td>
				<td>中级</td>
				<td>高级</td>
				<td>专家</td>
			</tr>
			<tr align="center">
				<td>标准</td>
				<td>被产品怼的说不出话</td>
				<td>跟产品互怼不相上下</td>
				<td>怼的产品没话说</td>
				<td>直接将其怼辞职</td>
			</tr>
			<tr>
				<td>用户A</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>用户B</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>用户C</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

结果展示：
在这里插入图片描述
知识点：

二.个人简历制作
1.建立目录007个人简历制作
2.建立文件index.html
3.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table cellspacing="0" border="1px">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			<col width="200px">
		    <tr height="50px" align="center">
		    	<td colspan="7">个人简介</td>
		    </tr>
		    <tr height="50px">
		    	<td>姓名</td>
		    	<td></td>
		    	<td>性别</td>
		    	<td></td>
		    	<td>年龄</td>
		    	<td></td>
		    	<td rowspan="4" align="center">照片</td>
		    </tr>
		    <tr height="50px">
		    	<td>学历</td>
		    	<td></td>
		    	<td>籍贯</td>
		    	<td colspan="3"></td>
		    </tr>
		    <tr height="50px">
		    	<td>电话</td>
		    	<td></td>
		    	<td>政治面貌</td>
		    	<td colspan="3"></td>
		    </tr>
		    <tr height="50px">
		    	<td>毕业院校</td>
		    	<td colspan="5"></td>
		    </tr>
		    <tr height="50px">
		    	<td>求职意向</td>
		    	<td colspan="6"></td>
		    </tr>
		</table>
			
		
	</body>
</html>

结果：
在这里插入图片描述
知识点：
快速建立表格
table>tr5>td3 然后用tab键就可以了
表格合并，就是删除不用的表格，然后用td标签的colspan，rowspan分别让表格占据几列和几行。

三.表格知识的补充
<th>标签=文字粗并水平居中的<td>标签

<colgroup span="6" width="100px">

colgroup 标签，把6列分为一组，这一组的列的宽度都设置为100px
在这里插入图片描述
关于注释

<!-- 注释 -->

小丑尽欢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端从零开始学习（html5) 四

终身学习学习视频：b站千峰教育web前端教程纸上得来终觉浅，绝知此事要躬行！一.简单表格的制作1.建立目录006简单表格的制作2.建立文件index.html3。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>前端技术阶段划分标准</h3
复制链接

扫一扫

专栏目录