今天事,今日了!
致 所有人
HI,大家好!今天给大家说一下html中创建表格的基础操作,文章内容全是笔记性质,不全之处请多多指教!
好吧,今天不按大路出牌,先上效果图,晃一双眼:
是不是感觉很熟悉的感觉,这就是我们简历模板中的表头信息,在html中一个表格就搞定,是不是很easy!
我知道大家已经等不及要看如何创建的这个模板,别急,请我慢慢道来,菜来了....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建表格</title>
</head>
<body>
<h3 align="center">创建个人简历模板</h3>
<!--创建一个简历模板的信息头表格-->
<table width="500" height="300" border="1" cellpadding="0" cellspacing="0" align="center">
<!--设置表格的高和宽,边框,居中显示-->
<tr>
<!--colspan 设置合并单元格,数字代表合并多少列,而在数字范围之内的其他行的对应td字段标签要同步删除-->
<td colspan="5" align="center">基础信息</td>
</tr>
<tr>
<!--设置每个字段占用总长的比例,并居中显示-->
<td width="18%" align="center">姓名</td>
<td width="18%"></td>
<td width="18%" align="center">性别</td>
<td width="18%"></td>
<!--插入图片-->
<td rowspan='5' width="28%"><img src="/home/python/Pictures/1535074898(1).jpg"></td>
<!--rowspan 设置合并单元格,数字代表合并多少行,而在数字范围之内的其他列的td字段标签要同步删除-->
</tr>
<tr>
<td align="center">年龄 </td>
<td></td>
<td align="center">地址</td>
<td></td>
</tr>
<tr>
<td align="center">手机号</td>
<td></td>
<td align="center">邮箱</td>
<td></td>
</tr>
<tr>
<td align="center">毕业学校</td>
<td></td>
<td align="center">专业</td>
<td></td>
</tr>
<tr>
<td align="center">特长</td>
<td></td>
<td align="center">工作年限</td>
<td></td>
</tr>
</table>
</body>
</html>
到这里一个简单的表格就创建完成了,只是利用了html的知识,并没有利用css样式,会在后续学习完善。
创建表格一行一行,一列一列的写肯定特麻烦,好在sumlines给我们想的很周到,用快捷键来创建表格!
实际演示一下:
创建一个6行5列的表格:
table>(tr>td*5)×6
,然后很骚气的按一下tab
键,见证奇迹:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
如果我们需要一次编辑多个内容,也是可以的,
按住ctrl
,用鼠标选择多行即可,
<table>
<tr>
<td>是不是很快</td>
<td>是不是很快</td>
<td>是不是很快</td>
<td>是不是很快</td>
<td>是不是很快</td>
</tr>
<tr>
<td>是不是很快</td>
<td>是不是很快</td>
<td>是不是很快</td>
<td>是不是很快</td>
<td>是不是很快</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
今天的笔记就先写到这里吧,做笔记是一个好习惯,不但能让自己复习,也能为日后复习好查找!