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>