【WEB基礎】HTML & CSS 基礎入門（7）表格
表格的基本結構
表格是網頁上最常見的元素，它除了可以用來展示資料，還常常被用來排版。雖然現在提倡使用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 --------------------------<