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.     }

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

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

  16. <table border="1">
  17.     <caption style="color:blue; caption-side: bottom;">學生成績</caption>
  18.     <tr>
  19.         <th>姓名</th>
  20.         <th>科目</th>
  21.         <th>分數</th>
  22.     </tr>
  23.     <tr>
  24.         <td>小明</td>
  25.         <td>數學</td>
  26.         <td>85</td>
  27.     </tr>
  28.     <tr>
  29.         <td>小華</td>
  30.         <td>英文</td>
  31.         <td>92</td>
  32.     </tr>
  33.     <tr>
  34.         <td>小美</td>
  35.         <td>歷史</td>
  36.         <td rowspan="2">從缺</td>
  37.     </tr>
  38.     <tr>
  39.         <td>阿華</td>
  40.         <td>國文</td>
  41.     </tr>
  42. </table>
複製代碼





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