css样式-表格优化

1、表格的初步优化

index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6      <link href="style6.css" type="text/css" rel="stylesheet">
 7 </head>
 8 <body>
 9       
10       <table id="tb">
11          <tr>
12             <th>姓名</th>
13             <th>年龄</th>
14             <th>性别</th>
15          </tr>
16          <tr>
17             <td>小王</td>
18             <td>20</td>
19             <td>男</td>
20          </tr>
21          <tr>
22             <td>小王</td>
23             <td>20</td>
24             <td>男</td>
25          </tr>
26          <tr>
27             <td>小王</td>
28             <td>20</td>
29             <td>男</td>
30          </tr>
31          <tr>
32             <td>小王</td>
33             <td>20</td>
34             <td>男</td>
35          </tr>
36       
37       </table>
38 </body>
39 </html>

MyCss6.css

 1 #tb,tr,th,td{
 2     border: 1px solid blue;
 3     text-align: center;
 4     background-color: aqua;
 5 }
 6 #tb{
 7     400px;
 8     height:400px;
 9     border-collapse: collapse;
10 }

效果：

2、表格的进一步优化：

index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6      <link href="style6.css" type="text/css" rel="stylesheet">
 7 </head>
 8 <body>
 9       
10       <table id="tb">
11          <tr>
12             <th>姓名</th>
13             <th>年龄</th>
14             <th>性别</th>
15          </tr>
16          <tr>
17             <td>小王</td>
18             <td>20</td>
19             <td>男</td>
20          </tr>
21          <tr class="alt">
22             <td>小王</td>
23             <td>20</td>
24             <td>男</td>
25          </tr>
26          <tr>
27             <td>小王</td>
28             <td>20</td>
29             <td>男</td>
30          </tr>
31          <tr class="alt">
32             <td>小王</td>
33             <td>20</td>
34             <td>男</td>
35          </tr>
36       
37       </table>
38 </body>
39 </html>

css:

 1 #tb{
 2     border-collapse: collapse;
 3     500px;
 4 }
 5 #tb td,#tb th{
 6     border:1px solid bisque;
 7     padding: 5px;
 8 }
 9 #tb th{
10     text-align: right;
11     background-color: aqua;
12     color: #FFFFFF;
13 }
14 #tb tr.alt td{
15     color:black;
16     background-color: aquamarine;
17 }

效果：