一、表格標(biāo)簽的主要作用
表格主要用于顯示、展示數(shù)據(jù)，因?yàn)樗梢宰寯?shù)據(jù)顯示的非常的規(guī)整，可讀性非變強(qiáng)。
表格不是用來(lái)布局頁(yè)面的,而是用來(lái)展示數(shù)據(jù)的.
二、表格標(biāo)簽的基本語(yǔ)法
<!-- 表格標(biāo)簽 -->
<table>
<!-- 表格的頭部區(qū)域 -->
<thead>
<tr>
<!-- 表頭標(biāo)簽，第一行，居中加粗顯示 -->
<th></th>
</tr>
</thead>
<!-- 表格的軀干部分 -->
<tbody>
<!-- 表格的行 -->
<tr>
<!-- 表格的列 -->
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
注解：
1.table標(biāo)簽：用于定義表格的標(biāo)簽。所有的表格標(biāo)簽屬性都要寫在table里面。
2.thead標(biāo)簽：用于定義表格的頭部。<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽。 一般是位于第一行。
3.th標(biāo)簽：該表格的表頭部分。
表頭單元格也是單元格, 常用于表格第一行, 突出重要性, 表頭單元格里面的文字會(huì)加粗居中顯示.
4.td標(biāo)簽：用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中。
5.tbody標(biāo)簽：用于定義表格的主體，主要用于放數(shù)據(jù)本體 。
6.tr標(biāo)簽：用于定義表格中的行，必須嵌套在 <table> </table>標(biāo)簽中
三、表格標(biāo)簽的屬性
align是表格相對(duì)頁(yè)面對(duì)齊方式，有l(wèi)eft/center/right三種方式，分別是左對(duì)齊，居中對(duì)齊，和右對(duì)齊。
border是表格的邊框線寬度，默認(rèn)為無(wú)邊框。
cellspacing是單元格之間的空白，即邊框線的寬度。
cellpadding是單元格內(nèi)容距邊框線的空白。即內(nèi)容與邊框線的距離。
width是表格的寬度。
所有屬性都要寫在table標(biāo)簽里。
<table align="center" border="1" cellspacing=0 cellpadding=10 width=500>
四、合并單元格
合并單元格方式：
跨行合并：rowspan="合并單元格的個(gè)數(shù)" 從上到下 ：最上側(cè)單元格為目標(biāo)單元格, 寫合并代碼
跨列合并：colspan="合并單元格的個(gè)數(shù)" 從左到右：最左側(cè)單元格為目標(biāo)單元格, 寫合并代碼
合并單元格三步曲：
- 先確定是跨行還是跨列合并。
- 找到目標(biāo)單元格. 寫上合并方式 = 合并的單元格數(shù)量。比如：<td colspan="2"></td>。
- 刪除多余的單元格。
<th colspan="5">個(gè)人簡(jiǎn)歷</th>
<td rowspan="4">照片</td>
五、案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>個(gè)人簡(jiǎn)歷</title>
</head>
<body>
<table border="1" cellspacing="0" align="center" width=500 height=800>
<thead>
<tr>
<th colspan="6">
<h2>個(gè)人簡(jiǎn)歷</h2>
</th>
</tr>
</thead>
<tbody>
<!-- 第二行 -->
<tr align="center">
<td>姓名：</td>
<td>小艾</td>
<td>專業(yè)：</td>
<td>修仙</td>
<!-- 跨列合并2個(gè)單元格，跨行合并3個(gè)單元格 -->
<td colspan="2" rowspan="3"></td>
</tr>
<!-- 第三行 -->
<tr align="center">
<td>性別：</td>
<td>女</td>
<td>畢業(yè)學(xué)校：</td>
<td>家里蹲大學(xué)</td>
</tr>
<!-- 第四行 -->
<tr align="center">
<td>名族：</td>
<td>漢</td>
<td>住址：</td>
<td>火星</td>
</tr>
<!-- 第五行 -->
<tr align="center">
<td>學(xué)歷：</td>
<td>博士前</td>
<td>郵箱：</td>
<td>123.com</td>
<td>聯(lián)系方式：</td>
<td>110</td>
</tr>
<!-- 第六行 -->
<tr align="center">
<td>出生日期：</td>
<td>1999</td>
<td>電話：</td>
<td>123456789</td>
<td> 郵編</td>
<td>654321</td>
</tr>
<!-- 第七行 -->
<tr>
<!-- 跨列合并2個(gè)單元格 -->
<td colspan="2" align="center">實(shí)習(xí)經(jīng)歷</td>
<!-- 跨列合并4個(gè)單元格 -->
<td colspan="4">搬磚</td>
</tr>
</tbody>
</table>
</body>
</html>
