1、表格的基本結構：
表格由行和列組成,單元格式表格的最基本單元;每個表格均有若干行,行標簽由<tr></tr>定義,每行被分割為若干單元格,由<td></td>標簽定義（td表示表格數據table data）,如果表格的第一行表示表格表頭,則第一行<tr></tr>中的<td></td>將用<th></th>標簽替換.數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等.
表格的基本結構：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
</body>
</html>
2、表格的基本屬性:
表格屬性分為兩大類：分別作用於<table></table>標簽和作用於行<tr></tr>和列<td></td>的屬性.
1、border屬性定義表格邊框,屬性值接受整數類型數值,表示設置表格邊框的寬度
說明:如果border的值增大,只有表格最外圍的框線增加,每個單元格上的邊框並不會變化.若將border設置為10,可查看設置效果
2、width/height定義表格的寬度和高度
3、bgcolor設置表格的背景顏色
4、backgroud屬性定義表格的背景圖,需要傳入一直圖片的地址;若background屬性與bgcolor屬性同時存在,背景圖會覆蓋掉背景顏色.
5、bordercolor設置表格邊框的顏色,接收顏色值
6、cellspacing設置表格單元格間距,設置表格單元格與單元格之間的間距;當cellspacing設置為0時,單元格之間沒有間距
說明:cellspacing設置為0時並不能合並相鄰邊框,因此設置cellspacing=0時是兩條邊框線的寬度.如果需要合並表格邊框可以使用style="border-collapse: collapse;"進行設置
7、cellpadding表格單元格內邊距屬性,即單元格中文字與單元格邊框之間的距離
8、align屬性用於調整表格在其父容器中的位置,可選值有left、center、right、分別表示表格居左、居中、居右顯示
注意：align屬性建議不再使用,它的相關功能已被CSS中的float所取代
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <table border="1" width="400" height="200" bgcolor="red" background="../src/img/login-bg.jpg" bordercolor="red" cellspacing="0" style="border-collapse: collapse;" cellpadding="10"> <tr> <th>表頭一</th> <th>表頭二</th> <th>表頭三</th> </tr> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> </table> </body> </html>
3、行和列基本屬性:作用於行<tr></tr>和列<td></td>的屬性
1、width/height設置單元格寬度和高度
2、bgcolor設置單元格的背景顏色
3、align單元格內容水平對齊方式
說明:表格table標簽中的align屬性是設置表格自身在瀏覽器中顯示的位置,而行tr和列td的align屬性是控制單元格中文字在單元格中的對齊方式;表格的align屬性並不會影響表格內d 文字的水平方式,tr標簽的align屬性可以控制一行中所有單元格文字的水平對齊方式.
4、valign設置單元格中內容的垂直對齊方式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <table border="1"> <tr> <th>表頭一</th> <th>表頭二</th> <th>表頭三</th> </tr> <tr> <td width="150" height="100">第一行第一列</td> <td bgcolor="#0000FF">第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td width="200" height="100" align="left">第二行第一列</td> <td width="200" height="100" align="center">第二行第二列</td> <td width="200" height="100" align="right">第二行第三列</td> </tr> <tr> <td width="200" height="100" valign="top">第三行第一列</td> <td width="200" height="100" valign="center">第三行第二列</td> <td width="200" height="100" valign="bottom">第三行第三列</td> </tr> </table> </body> </html>
4、表格的跨行和跨列：
colspan屬性表示跨列,當某個格跨N列時,其右邊N-1個單元格需要刪除;
rowspan屬性表示跨行,當某個格跨N行時,其下方N-1個單元格需要刪除
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <table border="1"> <tr align="center"> <td colspan="3">學生成績信息</td> </tr> <tr align="center"> <td rowspan="3">張三</td> <td>語文</td> <td>98</td> </tr> <tr align="center"> <td>數學</td> <td>100</td> </tr> <tr align="center"> <td>英語</td> <td>95</td> </tr> <tr align="center"> <td rowspan="3">李四</td> <td>語文</td> <td>95</td> </tr> <tr align="center"> <td>數學</td> <td>98</td> </tr> <tr align="center"> <td>英語</td> <td>100</td> </tr> </table> </body> </html>
5、表格的結構化:將比哦啊個分為表頭、表體、表尾,這樣在修改其中一部分時不會影響到其他部分,方便對表格進行操作,一個完整的表格通常分為四部分:<br />
1、caption:表格的標題,通常出現在表格頂部
2、thead:定義表格的表頭,通常表現為標題行
3、tbody：定義一段表格主體,一個表格可以有多個主體,可以按照行來進行分組
4、tfoot：定義表格的表尾,通常表現為總計行
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <table border="1"> <caption>表格的標題</caption> <thead> <tr> <th>表格的頭部</th> </tr> </thead> <tbody> <tr> <td>表格的主體</td> </tr> </tbody> <tfoot> <tr> <td>表格的底部</td> </tr> </tfoot> </table> </body> </html>
6、表格的直列化:表格的直列化可以對表格進行分組,這樣就不需要對各個單元和各行重復應用樣式
注意：colgroup標簽只能在table中使用
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <table width="500"> <colgroup style="background-color: yellow;"> <!--前兩列為一組--> <col /><!--第一列--> <col /><!--第二列--> </colgroup> <col style="background-color: blue;" /><!--第三列--> <caption>表格的標題</caption> <thead> <tr> <th>表頭一</th> <th>表頭二</th> <th>表頭三</th> </tr> </thead> <tbody> <tr> <td>主體一</td> <td>主體一</td> <td>主體一</td> </tr> <tr> <td>主體二</td> <td>主體二</td> <td>主體二</td> </tr> </tbody> <tfoot> <tr> <td>底部一</td> <td>底部二</td> <td>底部三</td> </tr> </tfoot> </table> </body> </html>
特別休假單案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
特別休假單案例:
-->
</head>
<body>
<h2 style="width: 500px; text-align: center; text-decoration: underline;">特別休假申請單</h2>
<p>申請日期: 年 月 日</p>
<table width="500" border="1" style="border-collapse: collapse;">
<tr>
<td>所屬單位</td>
<td>部 組 班</td>
<td>職稱</td>
<td width="50"></td>
<td>姓名</td>
<td width="50"></td>
<td>廠長</td>
</tr>
<tr>
<td rowspan="2">期間</td>
<td colspan="3">年 月 日</td>
<td rowspan="2" colspan="2">天數</td>
<td width="50"></td>
</tr>
<tr>
<td colspan="3">年 月 日</td>
<td></td>
</tr>
<tr>
<td colspan="2">職務代理人</td>
<td colspan="4">蓋章</td>
<td></td>
</tr>
<tr>
<td>到期日期</td>
<td colspan="3">年   </td>
<td colspan="2">審核意見</td>
<td></td>
</tr>
<tr>
<td colspan="2">全年特別休假數</td>
<td colspan="2" align="right">天</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">已請假數</td>
<td colspan="2" align="right">天</td>
<td>人事主任</td>
<td>人事經辦</td>
<td>組長</td>
</tr>
<tr>
<td colspan="2">本次申請日數</td>
<td colspan="2" align="right">天</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td colspan="2">尚剩申請日數</td>
<td colspan="2" align="right">天</td>
</tr>
</table>
</body>
</html>
以上講解詳細完整代碼塊:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1、表格的基本結構：
表格由行和列組成,單元格式表格的最基本單元;每個表格均有若干行,行標簽由<tr></tr>定義,每行被分割為若干單元格,由<td></td>標簽定義（td表示表格數據table data）,
如果表格的第一行表示表格表頭,則第一行<tr></tr>中的<td></td>將用<th></th>標簽替換.數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等.
-->
</head>
<body>
<!--
表格的基本結構：
-->
<table>
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
<!--
2、表格的基本屬性:
表格屬性分為兩大類：分別作用於<table></table>標簽和作用於行<tr></tr>和列<td></td>的屬性.
-->
<p>
表格的基本屬性:<br />
1、border屬性定義表格邊框,屬性值接受整數類型數值,表示設置表格邊框的寬度<br />
說明:如果border的值增大,只有表格最外圍的框線增加,每個單元格上的邊框並不會變化.若將border設置為10,可查看設置效果<br />
2、width/height定義表格的寬度和高度<br />
3、bgcolor設置表格的背景顏色<br />
4、backgroud屬性定義表格的背景圖,需要傳入一直圖片的地址;若background屬性與bgcolor屬性同時存在,背景圖會覆蓋掉背景顏色.<br />
5、bordercolor設置表格邊框的顏色,接收顏色值<br />
6、cellspacing設置表格單元格間距,設置表格單元格與單元格之間的間距;當cellspacing設置為0時,單元格之間沒有間距<br />
說明:cellspacing設置為0時並不能合並相鄰邊框,因此設置cellspacing=0時是兩條邊框線的寬度.如果需要合並表格邊框可以使用style="border-collapse: collapse;"進行設置<br />
7、cellpadding表格單元格內邊距屬性,即單元格中文字與單元格邊框之間的距離<br />
8、align屬性用於調整表格在其父容器中的位置,可選值有left、center、right、分別表示表格居左、居中、居右顯示<br />
注意：align屬性建議不再使用,它的相關功能已被CSS中的float所取代,<br />
</p>
<table
border="1"
width="400" height="200"
bgcolor="red"
background="../src/img/login-bg.jpg"
bordercolor="red"
cellspacing="0"
style="border-collapse: collapse;"
cellpadding="10">
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
<!--
3、行和列基本屬性:作用於行<tr></tr>和列<td></td>的屬性
-->
<p>
行和列基本屬性:<br />
1、width/height設置單元格寬度和高度<br />
2、bgcolor設置單元格的背景顏色<br />
3、align單元格內容水平對齊方式<br />
說明:表格table標簽中的align屬性是設置表格自身在瀏覽器中顯示的位置,而行tr和列td的align屬性是控制單元格中文字在單元格中的對齊方式;表格的align屬性並<br />
不會影響表格內文字的水平方式,tr標簽的align屬性可以控制一行中所有單元格文字的水平對齊方式.<br />
4、valign設置單元格中內容的垂直對齊方式<br />
</p>
<table border="1">
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
</tr>
<tr>
<td width="150" height="100">第一行第一列</td>
<td bgcolor="#0000FF">第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr >
<td width="200" height="100" align="left">第二行第一列</td>
<td width="200" height="100" align="center">第二行第二列</td>
<td width="200" height="100" align="right">第二行第三列</td>
</tr>
<tr>
<td width="200" height="100" valign="top">第三行第一列</td>
<td width="200" height="100" valign="center">第三行第二列</td>
<td width="200" height="100" valign="bottom">第三行第三列</td>
</tr>
</table>
<p>
表格的跨行和跨列：<br />
colspan屬性表示跨列,當某個格跨N列時,其右邊N-1個單元格需要刪除;<br />
rowspan屬性表示跨行,當某個格跨N行時,其下方N-1個單元格需要刪除<br />
</p>
<table border="1">
<tr align="center">
<td colspan="3">學生成績信息</td>
</tr>
<tr align="center">
<td rowspan="3">張三</td>
<td>語文</td>
<td>98</td>
</tr>
<tr align="center">
<td>數學</td>
<td>100</td>
</tr>
<tr align="center">
<td>英語</td>
<td>95</td>
</tr>
<tr align="center">
<td rowspan="3">李四</td>
<td>語文</td>
<td>95</td>
</tr>
<tr align="center">
<td>數學</td>
<td>98</td>
</tr>
<tr align="center">
<td>英語</td>
<td>100</td>
</tr>
</table>
<p>
表格的結構化:將比哦啊個分為表頭、表體、表尾,這樣在修改其中一部分時不會影響到其他部分,方便對表格進行操作.<br />
一個完整的表格通常分為四部分:<br />
1、caption:表格的標題,通常出現在表格頂部<br />
2、thead:定義表格的表頭,通常表現為標題行<br />
3、tbody：定義一段表格主體,一個表格可以有多個主體,可以按照行來進行分組<br />
4、tfoot：定義表格的表尾,通常表現為總計行<br />
</p>
<table border="1">
<caption>表格的標題</caption>
<thead>
<tr>
<th>表格的頭部</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格的主體</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格的底部</td>
</tr>
</tfoot>
</table>
<p>
表格的直列化:表格的直列化可以對表格進行分組,這樣就不需要對各個單元和各行重復應用樣式<br />
注意：colgroup標簽只能在table中使用<br />
</p>
<table width="500">
<colgroup style="background-color: yellow;"> <!--前兩列為一組-->
<col /><!--第一列-->
<col /><!--第二列-->
</colgroup>
<col style="background-color: blue;" /><!--第三列-->
<caption>表格的標題</caption>
<thead>
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
</tr>
</thead>
<tbody>
<tr>
<td>主體一</td>
<td>主體一</td>
<td>主體一</td>
</tr>
<tr>
<td>主體二</td>
<td>主體二</td>
<td>主體二</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>底部一</td>
<td>底部二</td>
<td>底部三</td>
</tr>
</tfoot>
</table>
</body>
</html>