表格的基本結構
表格是網頁上最常見的元素，它除了可以用來展示資料，還常常被用來排版。雖然現在提倡使用DIV+CSS完成頁面佈局，但表格框架簡單明瞭，對於繁雜的資料，一個簡潔的表格能讓其展現的極有條理。
簡單來說，表格是由行、列（單元格）組成。表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行又由若干單元格（即列，由 <td> 標籤定義）組成。表格單元格里可以包含文字、圖片、列表、段落、表單、水平線、表格（巢狀）等等。
別羅嗦，看程式碼。
下面的程式碼是一個兩行兩列的表格。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <table><!--表格開始--> <tr><!--表格第一行--> <td>姓名</td><!--第一行第一個單元格--> <td>張三</td><!--第一行第二個單元格--> </tr> <tr><!--表格第二行--> <td>民族</td><!--第二行第一個單元格--> <td>漢族</td><!--第二行第二個單元格--> </tr> </table><!--表格結束--> </body> </html>
表格預設是沒有邊框的，下面的效果圖加入了邊框，目的是能讓表格的結構更清晰。
表格的標準結構
表格除了行<tr>和單元格<td>，還可以有標題<caption>和表頭<th>。另外，表格的語義化還將表格分為表格頁首<thead>、表格主體<tbody>、表格頁尾<tfoot>三個部分。引入語義化，能夠讓表格結構更清晰、程式碼語義更良好。
下面的示例程式碼加入了標題和表頭，同時引入了表格語義化，將表格分為頁首、主體。頁尾三個部分，表格語義化是否新增不會影響到表格的顯示效果。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <table><!--表格開始--> <caption>第一學期學生成績表</caption><!--表格標題--> <thead><!--表格頁首--> <tr><!--第一行--> <th>姓名</th><!--表頭--> <th>語文</th> <th>數學</th> <th>物理</th> </tr> </thead> <tbody><!--表格主體--> <tr><!--第二行--> <td>張小明</td> <td>80</td> <td>90</td> <td>80</td> </tr> <tr><!--第三行--> <td>王小花</td> <td>90</td> <td>70</td> <td>80</td> </tr> </tbody> <tfoot><!--表格頁尾--> <tr><!--第四行--> <td>平均分</td> <td>85</td> <td>80</td> <td>80</td> </tr> </tfoot> </table><!--表格結束--> </body> </html>
表格預設是沒有邊框的，下面的效果圖加入了邊框，目的是能讓表格的結構更清晰。
表格的行、列合併
在表格的實際應用中，經常需要將表格相鄰的兩個或多個單元格合併，以滿足不同長度或不同型別的資料展示。
<td>標籤的【rowspan】屬性可以實現合併行，<td rowspan="合併的行數">
<td>標籤的【colspan】屬性可以實現合併列，<td colspan="合併的列數">
示例程式碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /*設定圖片的寬和高，防止將表格撐變形*/ img {width:76px; height:82px;} </style> </head> <body> <table> <tr><!--第1行--> <td>姓名:</td> <td>小叮噹</td><!--下面是合併兩行--> <td rowspan="2"><img src="小叮噹.jpg"/></td> </tr> <tr><!--第2行--> <td>作品:</td> <td>哆啦A夢</td> </tr> <tr><!--第3行--> <td>簡介:</td><!--下面是合併兩列--> <td colspan="2">來自一部漫畫作品</td> </tr> </table> </body> </html>
表格預設是沒有邊框的，下面的效果圖加入了邊框，目的是能讓表格的結構更清晰。
表格的CSS樣式
表格預設是沒有邊框的，我們可以使用border屬性為table設定邊框。上面的程式碼都是加入邊框，可以看到，表格都是雙線條邊框，這是由於 table、th 以及 td 元素都有獨立的邊框。【border-collapse】屬性可以設定是否把表格邊框合併為單一的邊框，該屬性的取值主要有兩個，值【separate】為預設值，表示邊框分開不合並，值【collapse】為合併邊框。
當表格的邊框屬性【border-collapse】的值為預設值【separate】，即邊框分開時，我們還可以利用屬性【border-spacing】來設定相鄰單元格的邊框間的距離。該屬性可以設定一個或兩個畫素值，當設定一個畫素值時，表示水平和垂直間隔為同一值；如果設定了兩個值，則第一個為水平間距，第二個為垂直間距。
示例程式碼：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*為表格設定邊框樣式*/ table,th,td{border:1px solid red;} table.one { /*設定第一個表格為合併邊框*/ border-collapse: collapse; } table.two { /*設定第二個表格為分離邊框，同時設定水平間距10px，垂直間距50px*/ border-collapse: separate; border-spacing: 10px 30px } </style> </head> <body> <table class="one"> <tr> <td>單元格1</td> <td>單元格2</td> </tr> <tr> <td>單元格1</td> <td>單元格2</td> </tr> </table> <br /> <table class="two"> <tr> <td>單元格1</td> <td>單元格2</td> </tr> <tr> <td>單元格1</td> <td>單元格2</td> </tr> </table> </body> </html>
-------------------------- END --------------------------