表格/給表格新增樣式
阿新 • • 發佈：2019-01-01
表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 在HTML中，使用table標籤來建立一個表格 --> <table border="1" width="40%" align="center"> <!-- 在table標籤中使用tr來表示表格中的一行，有幾行就有幾對tr --> <tr> <!-- 在tr中需要使用td來建立一個單元格，有幾個單元格就有幾個td --> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> <!-- rowspan用來設定縱向的合併單元格 --> <td rowspan="2">B4</td> </tr> <tr> <td>C1</td> <td>C2</td> <td>C3</td> </tr> <tr> <td>D1</td> <td>D2</td> <!-- colspan橫向的合併單元格 --> <td colspan="2">D3</td> </tr> </table> </body> </html>
給表格新增樣式
邊框
border:1px solid black;
table和td邊框之間預設有一個距離，通過border-spacing屬性可以設定這個距離
border-spacing: 10px;
border-collapse可以用來設定表格的邊框合併
如果設定了邊框合併，則border-spacing自動失效
設定背景樣式
background-color: #bfa;
可以使用th標籤來表示表頭中的內容， 它的用法和td一樣，不同的是它會有一些預設效果
/*設定邊框*/
th, td{
border: 1px solid black;
}
/*設定隔行變色*/
tbody > tr:nth-child(even){
background-color: #bfa;
}
/*滑鼠移入到tr以後，改變顏色*/
tr:hover{
background-color: yellow;
}
<!DOCTYPE html> <html lang="en"> <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: 10px;*/ /* border-collapse可以用來設定表格的邊框合併 如果設定了邊框合併，則border-spacing自動失效 */ border-collapse: collapse; /*設定背景樣式*/ /*background-color: #bfa;*/ } /*設定邊框*/ th, td{ border: 1px solid black; } /*設定隔行變色*/ tbody > tr:nth-child(even){ background-color: #bfa; } /*滑鼠移入到tr以後，改變顏色*/ tr:hover{ background-color: yellow; } </style> </head> <body> <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>