三、CSS样式——表格

1、CSS表格

　　CSS表格属性可以帮助我们极大的改善表格的外观

2、表格边框

3、折叠边框

4、表格宽高

5、表格文本对齐

6、表格内边距

 7、表格颜色

 <!--index.html-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
     <table id="tb">
         <tr>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
         </tr>
         <tr>
             <td>小王</td>
             <td>02</td>
             <td>男</td>
         </tr>
         <tr>
             <td>小王</td>
             <td>02</td>
             <td>男</td>
         </tr>
         <tr>
             <td>小王</td>
             <td>02</td>
             <td>男</td>
         </tr>
     </table>
 </body>
 </html>

 /*style.css*/
 #tb,tr,th,td{
     border: 1px solid blueviolet;
     text-align: center;
     background-color: red;
 }

 #tb{
     width: 400px;
     height: 400px;
     border-collapse: collapse;
     /*!*将两条边框合并成一条边框*!*/
 }

 <!--index.html-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
     <table id="tb">
         <tr>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
         </tr>
         <tr class="alt">
             <td>小王</td>
             <td>02</td>
             <td>男</td>
         </tr>
         <tr>
             <td>小王</td>
             <td>02</td>
             <td>男</td>
         </tr>
         <tr class="alt">
             <td>小王</td>
             <td>02</td>
             <td>男</td>
         </tr>
     </table>
 </body>
 </html>

 #tb{
     border-collapse: collapse;
     width: 500px;
 }
 #tb td,#tb th{
     border: 1px solid darkolivegreen;
     padding: 5px;
 }

 #tb th{
     text-align: left;
     background-color: blueviolet;
     color: white;
 }

 #tb tr.alt td{
     color: black;
     background-color: aqua;
 }