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>
HTML的基本知识（六）——表格的基本属性之实现个人简历（2）https://developer.aliyun.com/article/1383092
