Board logo

標題: CSS 表格資料 [打印本頁]
作者: 陳育霖    時間: 2023-8-29 13:44     標題: CSS 表格資料

本帖最後由 陳育霖 於 2023-8-29 13:59 編輯

表格標題 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.     }

  6.     th {
  7.         border: 2px solid green;
  8.         background-color: aqua;
  9.         padding: 5px;
  10.     }

  12.     td {
  13.         border: 2px solid red;
  14.         background-color: aliceblue;
  15.         padding: 5px;
  16.     }
  17. </style>

  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>
複製代碼




歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://seed.istak.org.tw/) Powered by Discuz! 7.2