HTML的基本知识（六）——表格的基本属性之实现个人简历

HTML的基本知识（六）——表格的基本属性之实现个人简历

如今你的气质里，藏着你走过的路，读过的书和爱过的人。” ——《卡萨布兰卡》

一、表格
（1）表格的作用：表格在数据展示方面非常简单，并且表现地非常优秀，通过与CSS结合，可以让数据变得更加美观。
（2）单元格的特点：同行等高、同列等宽。
（3）表格的常用标签：

<table></table>    表格
<tr></tr>       行  table row
<td></td>     列，单元格 table data
<th></th>   特殊的单元格，位置替换td的位置，table head
<caption></caption>  表格的标题 加在开始标签的下面

4、表格的属性：

border  设置表格边框，默认没有边框
align  表格的对齐方式：center right left（默认居左）
width  宽度 默认为px（像素）单位可以省略
height 高度  默认为px（像素）单位可以省略
cellpadding:单元格内容距离边框的距离
cellspacing:单元格与单元格之间的距离，默认1px,当设置为0的时候，就会合并，变成一条线
bgcolor: 背景颜色
background:设置背景图片，（背景图片的优先级大于背景颜色）
bordercolor:边框颜色，设置边框颜色必须要有边框

5、 tr的属性：

 tr的属性：height 行高 align 设置内容的水平对齐方式 默认为left 取值center rightvalign 设置内容的垂直对齐方式默认middle 取值top bottom bgcolor 设置行的背景颜色 background 设置行的背景图片

6、td的属性：

td的属性：width 列的宽度 height 列的高度 align 水平对齐方式 valign 垂直对齐方式 bgcolor 背景颜色background 背景图片

7、水平合并和垂直合并：

 colspan 水平合并 相当于X轴 水平合并，写在合并开始的单元格上，取值为数字，删除同一行的单元格删除的个数=合并个数-1rowspan 垂直合并 相当于Y轴 写在合并开始的单元格上，取值为数字，删除下面几行的单元格 删除的个数=合并个数-1

举个例子：

<table border="1" height="300" width="400"><tr><td colspan="2"></td><td rowspan="2"></td></tr><tr><td rowspan="2"></td><td></td></tr><tr><td colspan="2"></td></tr></table>

二、表格的结构

<table ><tr><td> 三行三列</td><td> 三行三列</td><td> 三行三列</td></tr> <tr> <td> 三行三列</td><td> 三行三列</td><td> 三行三列</td></tr> <tr> <td> 三行三列</td><td> 三行三列</td><td> 三行三列</td></tr></table>

三、话不多说，先上代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>006</title>
<style>
.btbg{ text-align:center; }
</style>
</head>
<body>
<table border="0" align="center" width="100%" cellpadding="2" cellspacing="0"><tr><td align="center" height="60">个人简历</td><tr>
</table>
<table class="tabtop" width="45%" border="1" cellpadding="1" cellspacing="2" align="center"><tr><td class="btbg" >姓名</td><td width="10%" class="btbg" ></td><td width="10%" class="btbg" >性别</td><td width="10%" class="btbg" ></td><td class="btbg" width="10%">出生日期</td><td colspan="2" class="btbg" width="10%"></td><td colspan="" class="btbg" width="10%" rowspan="4">照片</td></tr><tr><td class="btbg">民族</td><td class="btbg"></td><td class="btbg">政治面貌</td><td class="btbg"></td><td class="btbg">婚姻状况</td><td class="btbg"></td></tr><tr><td class="btbg">现所在地</td><td class="btbg"></td><td class="btbg">籍贯</td><td class="btbg"></td><td class="btbg">学历</td><td class="btbg"></td></tr><tr><td width="8%" class="btbg">毕业学校</td><td colspan="2" width="8%" class="btbg"></td><td width="8%" class="btbg">专业</td><td colspan="2" width="8%" class="btbg"></td></tr><tr><td class="btbg" rowspan="5">学习经历</td><td colspan="2" class="btbg">起止年月</td><td colspan="2" class="btbg">就读（培训）学校</td><td colspan="3" class="btbg">专业/课程</td></tr><tr><td colspan="2" class="btbg">&nbsp</td><td colspan="2" class="btbg"></td><td colspan="3" class="btbg"></td></tr><tr><td colspan="2" class="btbg">&nbsp</td><td colspan="2" class="btbg"></td><td colspan="3" class="btbg"></td></tr><tr><td colspan="2" class="btbg">&nbsp</td><td colspan="2" class="btbg"></td><td colspan="3" class="btbg"></td></tr><tr><td colspan="2" class="btbg">&nbsp</td><td colspan="2" class="btbg"></td><td colspan="3" class="btbg"></td></tr><tr><td class="btbg" rowspan="5">工作经历</td><td colspan="2" class="btbg">起止年月</td><td colspan="2" class="btbg">工作单位</td><td colspan="3" class="btbg">职责</td></tr><tr><td colspan="2" class="btbg">&nbsp</td><td colspan="2" class="btbg"></td><td colspan="3" class="btbg"></td></tr><tr><td colspan="2" class="btbg">&nbsp</td><td colspan="2" class="btbg"></td><td colspan="3" class="btbg"></td></tr><tr><td colspan="2" class="btbg">&nbsp</td><td colspan="2" class="btbg"></td><td colspan="3" class="btbg"></td></tr><tr><td colspan="2" class="btbg">&nbsp</td><td colspan="2" class="btbg"></td><td colspan="3" class="btbg"></td></tr><tr><td colspan="1" class="btbg" rowspan="2">求职意向</td><td colspan="7" class="btbg" rowspan="2"></td></tr>
</table>
</body>
</html>

 <table border="1" align="center" width="500"><caption ><b>同学通讯录</caption></b><tr bgcolor="pink"><td>姓名</td><td>性别</td><td>电话</td><td>兴趣爱好</td><td>兴趣爱好</td></tr><tr align="center"><td>王明</td><td>男</td><td>123456</td><td>旅游</td><td>篮球</td></tr><tr align="center"><td>赵静</td><td>女</td><td>123456</td><td>音乐</td><td>舞蹈</td></tr><tr height="24px"><td></td><td></td><td></td><td></td><td></td></tr></table>

<table border="5" align="center" width="1000" cellspacing="0"><caption>学生信息表</caption><tr><th>学生</th><th>性别</th><th>专业</th><th>课程</th><th>分数</th></tr><tr align="center"><td>球球</td><td>男</td><td rowspan="2">计算机</td><td rowspan="3">程序设计</td><td>68</td></tr><tr align="center"><td>楠楠</td><td>女</td><td>89</td></tr><tr align="center"><td>小明</td><td>女</td><td>会计</td><td>68</td></tr><tr align="center"><td>小明</td><td>男</td><td>建筑</td><td>建筑设计</td><td>68</td></tr>
</table>

  <table border="2" width="500" cellspacing="1" height="200"><tr><th rowspan="2">名称</th><th colspan="2">2016-11-22</th><th rowspan="2"> 小计</th></tr><tr><th>重量</th><th>单价</th></tr><tr align="center"><td>苹果</td><td>3公斤</td><td>5元/公斤</td><td>15元</td></tr><tr align="center"><td>香蕉</td><td>2公斤</td><td>6元/公斤</td><td>12元</td></tr><tr align="center"><td colspan="3">总价</td><td>27元</td></tr></table>

<table border="3" cellspacing="1" width="600" height="300"><tr align="center" bgcolor="orange"><td rowspan="2">酒店</td><td>海外酒店</td><td>团购</td></tr><tr align="center" bgcolor="orange"><td>特价酒店</td><td>民宿、客栈</td></tr><tr align="center" bgcolor="blue"><td rowspan="2">机票</td><td>火车票、抢票</td><td>汽车票、船票</td></tr><tr align="center" bgcolor="blue"><td>特价机票</td><td>专车、租车</td></tr><tr align="center" bgcolor="green"><td rowspan="2">旅游</td><td>目的地攻略</td><td>游船轮游</td></tr><tr align="center" bgcolor="green"><td>周边游</td><td>定制旅游</td></tr><tr align="center" bgcolor="yellow"><td>景点玩乐</td><td>美食书</td><td>购物、外汇</td></tr><tr align="center" bgcolor="yellow"><td>礼品卡</td><td>WIFI、电话卡</td><td>保险、签证</td></tr></table>

<table border="1" width="500" cellspacing="0"><caption>列车时刻表</caption><tr align="center"><td>站名</td><td>到站时间</td><td>开车时间</td></tr><tr align="center"><td>北京</td><td>10:30</td><td>10:50</td></tr><tr align="center"><td>上海</td><td>14:20</td><td>14:50</td></tr></table>

HTML的基本知识（六）——表格的基本属性之实现个人简历相关推荐

HTML中有关表格的基本属性知识
2019独角兽企业重金招聘Python工程师标准>>> 表格在网页编程中使用非常的广泛,而且也非常的重要,下面我就将本人编程中所总结的有关表格的基本属性整理处理. table标签的基 ...
计算机表格行列知识,计算机基础知识——应用表格.ppt
计算机基础知识--应用表格应用表格课前导读基础知识重点知识了解知识基础知识插入表格.合并和拆分单元格.使读者学习到最基本的表格插入和编辑的方法. 重点知识绘制表格.调整表格结构.绘制斜 ...
计算机一级考试wps知识点,2018年计算机一级考试WPS辅导知识：表格单元格格式设置方法...
2018年3月计算机等级考试即将开始,小编在这里为考生们整理了2018年计算机一级考试WPS辅导知识,希望能帮到大家,想了解更多资讯,请关注出国留学网的及时更新哦. 2018年计算机一级考试WPS辅导 ...
计算机wps表格基础知识,wps表格教程全套 - 51自学网
原标题:wps表格教程全套 - 51自学网 WPS表格"共享工作簿"实现协同工作9分出处:wps 时间:2013-03-11 人气:11359 您可能感兴趣的问题: 基础知识处 ...
计算机科学基础知识(六)理解栈帧
一.前言本文以一个简单的例子来描述ARM linux下的stack frame. 本文也是对tigger网友问题的回复. 二.源代码 #include <stdio.h> static ...
计算机六年级基础知识,六年级计算机试题
六年级计算机试题一.多音字组词. 二.写出下列词语的近义词. 诞生--( ) 信息--( ) 获取--( ) 处理--( ) 传递--( ) 预料--( ) 三.把不能搭 ...
关于Linux学习的热身知识六
第六章一.文件权限 1.文件属性的查看: ls -l filename -|rw-r--rr--.|1| root| root| 46 |Oct 1 0 ...
Markdown(六)——表格合并单元格增加标题
前言:之前有写过Markdown的表格记录处理标记,见Markdown语法(三)--列表&表格.但是发现这种方式不能合并单元格,对想要合并单元格的数据很不友好.好在Markdown可以支持HT ...
17、前端开发：HTML知识补充——表格标签
1.table标签块元素 tr表示表格中的一行,有几个tr就有几行 td表示一个单元格,有几个td就有几个单元格 rowspan 纵向合并单元格 colspan 横向合并单元格举例:三行两列表 ...

HTML的基本知识（六）——表格的基本属性之实现个人简历

HTML的基本知识（六）——表格的基本属性之实现个人简历相关推荐

最新文章

热门文章