HTML&CSS基礎-表格的樣式
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則將追究法律責任。
一.HTML源代碼
<!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; } /** * 偽類nth-child的even參數可以選中偶數行，而odd則可以選中奇數行。 * * 溫馨提示: * nth-child屬性IE8及以下版本並不支持，若非要達到相同的效果則需要引入JS來搞事情。 */ tr:nth-child(even){ background-color: yellow; } /** * 當鼠標移入到tr標簽后，會改變顏色 */ tr:hover{ background-color: deeppink; } /*為td標簽設置樣式*/ td,th{ /*設置邊框*/ border: 1px solid black; } </style> </head> <body> <table> <!-- table是塊元素 --> <tr> <!-- 可以使用th標簽來表示表頭的內容，它的用法和td一樣，不同的是他會有一些默認效果(居中，加粗) --> <th>學號</th> <th>姓名</td> <th>性別</td> <th>住址</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>5</td> <td>白龍馬</td> <td>男</td> <td>東海龍宮</td> </tr> <tr> <td>6</td> <td>哪吒</td> <td>男</td> <td>陳唐關</td> </tr> <tr> <td>7</td> <td>如來佛祖</td> <td>男</td> <td>西方極樂</td> </tr> <tr> <td>8</td> <td>牛魔王</td> <td>男</td> <td>鐵扇公主洞府</td> </tr> <tr> <td>9</td> <td>太白金星</td> <td>男</td> <td>太白金星府</td> </tr> <tr> <td>10</td> <td>女兒國女王</td> <td>女</td> <td>女兒國</td> </tr> <tr> <td>11</td> <td>觀音大師</td> <td>男</td> <td>南海</td> </tr> <tr> <td>12</td> <td>紅孩兒</td> <td>男</td> <td>紅孩兒洞府</td> </tr> </table> </body> </html>
二.瀏覽器打開以上代碼渲染結果
