一.表格的功能
1.構建一個基本表格。
2.表格添加行。
3.表格每一行添加單元格。
4.表格添加列標題。
5.表格添加表格標題。
6.表格合併多行。
7.表格合併多列。
二.表格的常用標籤
Table: 標識表格，代表外層的表格大容器。 表格：是由行和列組成。
Tr: 標識行，每一行都要用一個tr標籤。
Td: 標識普通單元格，每一個單元格用來填寫一個數據。
Th: 標識列標題單元格，自帶加粗，實現水平居中。
Caption：表格的標題，表頭。
三.表格的常用屬性
Border：邊框。 Border=”邊框的寬度”， 單位px。
Cellspacing：設置單元格與單元格之間的間隙。 單位：px。 不想要間隙，就給0。
Cellpadding: 設置單元格中的內容與單元格邊框之間的距離。 單位：px。
以下屬性作爲了解：
Align：讓內容水平對齊。 值：left左對齊，right右對齊，center居中對齊。
Valign：讓內容垂直對齊。 值：top頂部對齊，bottom底部對齊，middle居中對齊，baseline基線對齊。
Width：設置元素的寬度。
Height: 設置元素的高度。
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
需求：
1.表格：用來存儲學生信息。
2.存儲三個學生的信息，每個學生分別存儲姓名，性別，年齡，成績。
問題：我們需要創建一個幾行幾列
-->
<!--表格-->
<!--table:標識表格，代表外層的表格大容器。表格：由行和列組成-->
<!--tr：標識行,每一行都要用到tr-->
<!--td：標識單元格-->
<!--border:標識邊框-->
<!--cellspacing:單元格與單元格之間的間隙-->
<!--cellpadding:設置單元格中的內容與單元格邊框之間的距離。-->
<table border="1px" cellspacing="0px" cellpadding="20px" width="500px">
<caption>學生信息表</caption>
<!--行： tr -->
<!--1-->
<tr>
<!--單元格：td：標識的普通單元格-->
<!--單元格：th: 標識列標題單元格-->
<!--<td>姓名</td>
<td>性別</td>
<td>年齡</td>
<td>成績</td>-->
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>成績</th>
</tr>
<!--2-->
<tr align="center">
<td>Frank</td>
<td>男</td>
<td>18</td>
<td>100</td>
</tr>
<!--3-->
<tr align="center">
<td>rose</td>
<td>女</td>
<td>16</td>
<td>99</td>
</tr>
<!--4-->
<tr align="center">
<td>jack</td>
<td>男</td>
<td>20</td>
<td>59.9</td>
</tr>
<!--align:表示水平對齊。-->
<!--valign:讓內容垂直對齊。-->
</table>
<!--
如何通過快捷方式生成表格結構
table>tr*4>td*4
table>(tr>td*4)*4
注意：tr>td*4:這是一行的模板。(tr>td*4)*4：按照這個模板生成4行
table>(tr>th*4)+(tr>td*4)*3
注意：tr>th*4:這是一行的模板 (tr>td*4)*3這是其他三行的模板
>表示父級關係 +表示兄弟關係
-->
</body>
</html>
示例結果：
四. 單元格合併：
1.colspan:合併同行但是不同列的單元格。 Colspan=”合併的數量” 。
2.rowspan：合併同列但是不同行的單元格。 Rowspan=”合併的數量”。
注意點：
a.合併的屬性一定是添加給要合併的第一個單元格。
b.單元格合併完成之後，多餘的單元格一定要刪除掉！！！
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>單元格合併</title>
</head>
<body>
<!--生成6行4列的表格-->
<!--單元格合併
1.合併同行但是不同列的單元格,colspan = "合併的數量"。
2.合併同列但不是同行的單元格,rowspan = "合併的數量"。
注意點：
a.合併的屬性一定是添加給要合併的第一個單元格。
-->
<table border="1px" cellspacing="0px" width="800px">
<!--1-->
<tr>
<th colspan="4">課程時間表</td>
</tr>
<!--2-->
<tr align="center">
<td>時間安排</td>
<td>授課安排</td>
<td>週一~週五</td>
<td>週六日</td>
</tr>
<!--3-->
<tr align="center">
<td rowspan="4">上午</td>
<td>進直播時間</td>
<td>9:10</td>
<td rowspan="4">自習</td>
</tr>
<!--4-->
<tr align="center">
<td>第一節課</td>
<td>9:30~10:30</td>
</tr>
<!--5-->
<tr align="center">
<td>間休</td>
<td>10:30~10:50</td>
</tr>
<!--6-->
<tr align="center">
<td>第二節課</td>
<td>10:50~11:50</td>
</tr>
</table>
</body>
</html>
示例結果：
五. 表格練習-簡單簡歷。
效果圖：
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>個人簡歷</title>
<style type="text/css">
td{
/*固定寬度*/
width: 100px;
/*固定高度*/
height: 40px;
}
/*讓表格中所有文字水平居中*/
#doc{
text-align: center;
}
/*修改相關背景顏色*/
.bg{
background-color: chocolate;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0px" id="doc">
<caption>個人簡歷</caption>
<!--1-->
<tr>
<td class="bg">姓名</td>
<td></td>
<td class="bg">性別</td>
<td></td>
<td rowspan="5">相片</td>
</tr>
<!--2-->
<tr>
<td class="bg">出生日期</td>
<td></td>
<td class="bg">民族</td>
<td></td>
</tr>
<!--3-->
<tr>
<td class="bg">政治面貌</td>
<td></td>
<td class="bg">家庭狀況</td>
<td></td>
</tr>
<!--4-->
<tr>
<td class="bg">籍貫</td>
<td></td>
<td class="bg">現所在地</td>
<td></td>
</tr>
<!--5-->
<tr>
<td class="bg">聯繫電話</td>
<td></td>
<td class="bg">個人郵箱</td>
<td></td>
</tr>
<!--6-->
<tr>
<td class="bg">所學專業</td>
<td colspan="1"></td>
<td class="bg">最高學歷</td>
<td colspan="2"></td>
</tr>
<!--7-->
<tr>
<td class="bg">求職意向</td>
<td colspan="4" ></td>
</tr>
</table>
</body>
</html>
