CSS 表格資料

陳育霖

表格標題 caption-side: top|bottom|inherit;

1. caption { color: blue; caption-side: bottom; }
   
2. <table border="1">
   
3.   <caption>學生成績</caption>
   
4.   <tr>
   
5.     <th>姓名</th>
   
6.     <th>科目</th>
   
7.     <th>分數</th>
   
8.   </tr>
   
9.   <tr>
   
10.     <td>小明</td>
    
11.     <td>數學</td>
    
12.     <td>85</td>
    
13.   </tr>
    
14.   <tr>
    
15.     <td>小華</td>
    
16.     <td>英文</td>
    
17.     <td>92</td>
    
18.   </tr>
    
19.   <tr>
    
20.     <td>小美</td>
    
21.     <td>歷史</td>
    
22.     <td>78</td>
    
23.   </tr>
    
24. </table>

複製代碼

表格底色

1. caption { color:blue; caption-side:bottom; padding-top:5px; }
   
2. th { background-color: aqua; }
   
3. td { background-color: aliceblue; }

複製代碼

表格框線

1. table { border: 3px solid blue; }
   
2. th { border: 2px solid green; background-color: aqua; }
   
3. td { border: 2px solid red; background-color: aliceblue; }

複製代碼

表格內邊距

1. table { border: 3px solid blue; }
   
2. th { border: 2px solid green; background-color: aqua; padding: 5px;}
   
3. td { border: 2px solid red; background-color: aliceblue; padding: 5px;}

複製代碼

範例:

1. <style>
   
2.     table {
   
3.         border: 3px solid blue;
   
4.     }
   
5. 
   
6.     th {
   
7.         border: 2px solid green;
   
8.         background-color: aqua;
   
9.         padding: 5px;
   
10.     }
    
11. 
    
12.     td {
    
13.         border: 2px solid red;
    
14.         background-color: aliceblue;
    
15.         padding: 5px;
    
16.     }
    
17. </style>
    
18. 
    
19. <table border="1">
    
20.     <caption style="color:blue; caption-side: bottom;">學生成績</caption>
    
21.     <tr>
    
22.         <th>姓名</th>
    
23.         <th>科目</th>
    
24.         <th>分數</th>
    
25.     </tr>
    
26.     <tr>
    
27.         <td>小明</td>
    
28.         <td>數學</td>
    
29.         <td>85</td>
    
30.     </tr>
    
31.     <tr>
    
32.         <td>小華</td>
    
33.         <td>英文</td>
    
34.         <td>92</td>
    
35.     </tr>
    
36.     <tr>
    
37.         <td>小美</td>
    
38.         <td>歷史</td>
    
39.         <td rowspan="2">從缺</td>
    
40.     </tr>
    
41.     <tr>
    
42.         <td>阿華</td>
    
43.         <td>國文</td>
    
44.     </tr>
    
45. </table>

複製代碼