表格的基本結構
表格是網頁上最常見的元素，它除了可以用來展示數據，還常常被用來排版。雖然現在提倡使用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 --------------------------