html中我們學習了表格，到網頁中只有文字，並不像平時網頁中見到的標題頭帶有背景和邊框線的表格，今天我們就學習表格的樣式如何設置
表格屬性
表格邊框：使用border屬性，設置給每一個單元格。
table , th , td {
border:solid 1px #000;
}
表格邊框合並：添加邊框之后，我們發現是雙邊框，需要用到border-collapse屬性合並邊框，只能設置到table才能起作用。
table{
border-collapse:collapse;
}
table,th,td{
border:solid 1px #000;
}
表格寬度：表格寬度可以設置固定值，列的寬度不設置的時候會根據內容自動分配，也可以給單獨列設置固定寬度。
table{
width:100%
}
給單獨列設置固定寬度：給每行的第一列寬度設置為100px。
table tr td:nth-child{
width:100px;
}
設置背景：背景要設置到具體的單元格上。
table tr td{
background:red;
}
字體對齊方式：設置單元格內文字對齊方式。
td,th{
text-align:left;
}
單元格合並
合並列：使用colspan屬性來合並列，需要注意的是，合並一個列，就的刪除一個列，要不多余出來一個列。
eg：<th colspan="2">成員 </th>
合並行：使用rowspan屬性來合並行，其實合並的是下一行的單元格，添加行合並之后，下行的刪除一個單元格。
eg：<td rowspan="2">B</td>
制作一個帶有行合並和列合並的一個表格，
源碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ border-collapse: collapse; } table,th,td{ border:solid 1px red; text-align:center; } </style> </head> <body> <table> <tr> <th>序號</th> <th>小組</th> <th colspan="2">成員</th> </tr> <tr> <td>1</td> <td>A</td> <td>張三</td> <td>男</td> </tr> <tr> <td>2</td> <td rowspan="2">B</td> <td>李四</td> <td>男</td> </tr> <tr> <td>3</td> <td>王五</td> <td>男</td> </tr> </table> </body> </html>