html个人信息表制作（适合初学者）

编写HTML头部，设置标题和链入外部CSS设置。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>个人信息表制作</title><link type="text/css" href="./css/lsy.css" rel="stylesheet"><style>table{border-color: darkgray;border-style: outset;}</style></head>

在头部设置中，加入了style属性，在初步操作时，大家可以先对属性具体设置空出来，编写玩body部分之后，再回来编写style属性。

那么现在我们来正式编写body部分。
在< body >和< /body >中间设置表格属性。

        <h3>个人简历</h3>  /*表格标题设置*/<table border="1" cellpadding="0" cellspacing="0" ><tr><td class="center">姓名</td><td class="no-center">李**</td><td class="center">学号</td><td class="no-center">2019309891</td><td class="center">出生日期</td><td class="no-center">2000.10</td><td rowspan="5" class="jpg"><img src="./image/image.jpg" width="100" height="120"></td></tr>

这是一行表格内容的设置，个人证件照部分使用了img属性，如在同一级文件夹下存放图片，在src设置中，单击“./”会显示指引，进行单击选择即可。如图所示。

对于跨行的设置，可以使用**colspan="数字"和rowspan=“数字”**对行和列进行合并。例如：

<td rowspan="5" colspan="7"></td>

其余各行的设置可以参照第一行的设置。

小编也制作了一个完整的个人信息表，大家可以学习参考。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>个人信息表制作</title><link type="text/css" href="./css/lsy.css" rel="stylesheet"><style>table{border-color: darkgray;border-style: outset;}</style></head><body><div id="e_background"><div id="e_smallstars"></div><div id="e_moon"></div></div><h3>个人简历</h3><table border="1" cellpadding="0" cellspacing="0" ><tr><td class="center">姓名</td><td class="no-center">李**</td><td class="center">学号</td><td class="no-center">2019</td><td class="center">出生日期</td><td class="no-center">2000.10</td><td rowspan="5" class="jpg"><img src="./image/image.jpg" width="100" height="120"></td></tr><tr><td class="center">政治面貌</td><td class="no-center">预备党员</td><td class="center">民族</td><td class="no-center">汉族</td><td class="center">学历</td><td class="no-center">本科</td></tr><tr><td class="center">毕业院校</td><td colspan="3" class="no-center">**大学</td><td class="center">院系专业</td><td class="no-center">**专业</td></tr><tr><td class="center">邮箱</td><td colspan="3" class="no-center">46*****36@qq.com</td><td class="center">手机</td><td class="no-center">17******22</td></tr><tr><td class="center">籍贯</td><td colspan="3" class="no-center">**省</td><td class="center">家庭住址</td><td class="no-center">**省**市</td></tr><tr><td colspan="7" class="no-center">所获荣誉</td></tr><tr><td colspan="7" class="no-center">语言类：大学英语六级证书，普通话二甲资格证 <br/>技能类：通过计算机Office高级应用二级考试、计算机三级网络技术考试、计算机三级信息安全技术考试<br/>软件类：熟练掌握PS、PR、AU软件以及Office办公软件  <br/>荣誉类：2022年中国计算机设计大赛西北赛区三等奖<br/>学术类：发表一篇题为《****》论文<br/>活动类：校级优秀志愿者<br/></td></tr></table></body>
</html>

本文设置的CSS链表，需要大家再新建一个CSS。具体内容也呈现给大家啦！

body{max-width:660px;margin: 0 auto;
}
#e_background{background:#022436 url(../image/xingxing.png) repeat 20% 20%;position:fixed;top:0;left:0;right:0;bottom:0;z-index:-100;-webkit-animation:stars-anim 600s infinite linear;-moz-animation:stars-anim 600s infinite linear;-o-animation:stars-anim 600s infinite linear;animation:stars-anim 600s infinite linear
}
#e_smallstars{background:url(../image/xingxing.png) repeat 20% 20%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:1;z-index:-50;-webkit-animation:light 4s infinite alternate;-moz-animation:light 4s infinite alternate;-o-animation:light 4s infinite alternate;animation:light 4s infinite alternate
}
#e_moon{background:url(../image/yueliang.png) no-repeat 35% 35%;position:absolute;top:300px;left:700px;right:0;bottom:0;opacity:1;z-index:-25;-webkit-animation:moon-anim 100s infinite linear;-moz-animation:moon-anim 100s infinite linear;-o-animation:moon-anim 100s infinite linear;animation:moon-anim 100s infinite linear
}
.center {text-align: center;width:80px;
}
.no-center {padding-left: 10px;width:130px;
}
.border {font-weight: 700;
}
.jpg {text-align: center;padding-top:5px;
}
h3 {color:darkgray;text-align: center;
}
table {width: 700px;font: 10px/15px "Microsoft YaHei";color:darkgray;
}
tr{line-height: 25px;height:25px;
}

希望对大家有所帮助！**编辑不易，多多关注！**有任何问题支持私信哦！

html个人信息表制作（适合初学者）相关推荐

一个简单的C/C++编写的信息管理系统（适合初学者练手用）
这是作者大一时候的课程作业,多年后发现还保留着,就放上来分享下. 包含基本的数据结构设计:数据的录入.增删查改.排序.统计和全输出:和最后的退出自动保存数据等基本操作. 这里做的是学生信息管理系统,读 ...
用VC++修改注册表----让我们踏出第一步(适合初学者)
用VC++修改注册表----让我们踏出第一步(适合初学者) 转载自:www.csdn.net 开场白你是不是非常期待通过自己的双手,写出一个有模有样的＂系统修改(维护)工具软件＂?我想答案应该是 ...
python制作的点名神器（代码简单，适合初学者），老师再也不用发愁点名了
python制作的点名神器(代码简单,适合初学者),老师再也不用发愁点名了 python利用tkinter制作的点名神器,今天一个老师说让我帮他制作一个可以用来点名的小程序,由于和这个老师的关系比较好 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个复古手机键盘（带声音）的动画效果~~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!D ...
VLOOKUP函数制作多表查询（学生信息表/员工工资表）
VLOOKUP函数制作多表查询(学生信息表/员工工资表) 一.vlookup函数定义 VLOOKUP函数是Excel中的一个纵向查找函数,在工作中都有广泛应用,例如可以用来核对数据,多个表格之间快速导 ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...

html个人信息表制作（适合初学者）

html个人信息表制作（适合初学者）相关推荐

最新文章

热门文章