前端基礎---表格(二)
阿新 • • 發佈：2021-07-02
*table和td邊框之間預設有一個距離
*通過border-spacing屬性可以設定這個距離
*border-collapse可以用來設定表格的邊框合併
*如果設定了邊框合併，則border-spacing自動失效
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 設定表格的寬度 */ table{ width: 300px; /*居中*/ margin: 0 auto; /*邊框*/ /*border:1px solid black;*/ /* * table和td邊框之間預設有一個距離 * 通過border-spacing屬性可以設定這個距離 */ /*border-spacing:0px ;*/ /* * border-collapse可以用來設定表格的邊框合併 * 如果設定了邊框合併，則border-spacing自動失效*/ border-collapse: collapse; /*設定背景樣式*/ /*background-color: #bfa;*/ } /* * 設定邊框 */ td , th{ border: 1px solid black; } /* * 設定隔行變色*/ tr:nth-child(even){ background-color: #bfa; } /* * 滑鼠移入到tr以後，改變顏色 */ tr:hover{ background-color: #ff0; } </style> </head> <body> <!-- table是一個塊元素 --> <table> <tr> <!-- 可以使用th標籤來表示表頭中的內容， 它的用法和td一樣，不同的是它會有一些預設效果 --> <th>學號</th> <th>姓名</th> <th>性別</th> <th>住址</th> </tr> <tr> <td>1</td> <td>孫悟空</td> <td>男</td> <td>花果山</td> </tr> <tr> <td>2</td> <td>豬八戒</td> <td>男</td> <td>高老莊</td> </tr> <tr> <td>3</td> <td>沙和尚</td> <td>男</td> <td>流沙河</td> </tr> <tr> <td>4</td> <td>唐僧</td> <td>男</td> <td>女兒國</td> </tr> <tr> <td>1</td> <td>孫悟空</td> <td>男</td> <td>花果山</td> </tr> <tr> <td>2</td> <td>豬八戒</td> <td>男</td> <td>高老莊</td> </tr> <tr> <td>3</td> <td>沙和尚</td> <td>男</td> <td>流沙河</td> </tr> <tr> <td>4</td> <td>唐僧</td> <td>男</td> <td>女兒國</td> </tr> <tr> <td>1</td> <td>孫悟空</td> <td>男</td> <td>花果山</td> </tr> <tr> <td>2</td> <td>豬八戒</td> <td>男</td> <td>高老莊</td> </tr> <tr> <td>3</td> <td>沙和尚</td> <td>男</td> <td>流沙河</td> </tr> <tr> <td>4</td> <td>唐僧</td> <td>男</td> <td>女兒國</td> </tr> <tr> <td>1</td> <td>孫悟空</td> <td>男</td> <td>花果山</td> </tr> <tr> <td>2</td> <td>豬八戒</td> <td>男</td> <td>高老莊</td> </tr> <tr> <td>3</td> <td>沙和尚</td> <td>男</td> <td>流沙河</td> </tr> <tr> <td>4</td> <td>唐僧</td> <td>男</td> <td>女兒國</td> </tr> <tr> <td>1</td> <td>孫悟空</td> <td>男</td> <td>花果山</td> </tr> <tr> <td>2</td> <td>豬八戒</td> <td>男</td> <td>高老莊</td> </tr> <tr> <td>3</td> <td>沙和尚</td> <td>男</td> <td>流沙河</td> </tr> <tr> <td>4</td> <td>唐僧</td> <td>男</td> <td>女兒國</td> </tr> <tr> <td>1</td> <td>孫悟空</td> <td>男</td> <td>花果山</td> </tr> <tr> <td>2</td> <td>豬八戒</td> <td>男</td> <td>高老莊</td> </tr> <tr> <td>3</td> <td>沙和尚</td> <td>男</td> <td>流沙河</td> </tr> <tr> <td>4</td> <td>唐僧</td> <td>男</td> <td>女兒國</td> </tr> </table> </body> </html>