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 right
valign 设置内容的垂直对齐方式默认middle 取值top bottom
bgcolor 设置行的背景颜色
background 设置行的背景图片 6、
td
的属性：
td的属性：
width 列的宽度
height 列的高度
align 水平对齐方式
valign 垂直对齐方式
bgcolor 背景颜色
background 背景图片 7、水平合并和垂直合并：
colspan 水平合并 相当于X轴 水平合并，写在合并开始的单元格上，取值为数字，删除同一行的单元格删除的个数=合并个数-1
rowspan 垂直合并 相当于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"> </td>
<td colspan="2" class="btbg"></td>
<td colspan="3" class="btbg"></td>
</tr>
<tr>
<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"> </td>
<td colspan="2" class="btbg"></td>
<td colspan="3" class="btbg"></td>
</tr>
<tr>
<td colspan="2" class="btbg"> </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"> </td>
<td colspan="2" class="btbg"></td>
<td colspan="3" class="btbg"></td>
</tr>
<tr>
<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"> </td>
<td colspan="2" class="btbg"></td>
<td colspan="3" class="btbg"></td>
</tr>
<tr>
<td colspan="2" class="btbg"> </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>