本帖最後由 陳育霖 於 2023-8-29 13:59 編輯
表格標題 caption-side: top|bottom|inherit;- caption { color: blue; caption-side: bottom; }
- <table border="1">
- <caption>學生成績</caption>
- <tr>
- <th>姓名</th>
- <th>科目</th>
- <th>分數</th>
- </tr>
- <tr>
- <td>小明</td>
- <td>數學</td>
- <td>85</td>
- </tr>
- <tr>
- <td>小華</td>
- <td>英文</td>
- <td>92</td>
- </tr>
- <tr>
- <td>小美</td>
- <td>歷史</td>
- <td>78</td>
- </tr>
- </table>
複製代碼 表格底色- caption { color:blue; caption-side:bottom; padding-top:5px; }
- th { background-color: aqua; }
- td { background-color: aliceblue; }
複製代碼 表格框線- table { border: 3px solid blue; }
- th { border: 2px solid green; background-color: aqua; }
- td { border: 2px solid red; background-color: aliceblue; }
複製代碼 表格內邊距- table { border: 3px solid blue; }
- th { border: 2px solid green; background-color: aqua; padding: 5px;}
- td { border: 2px solid red; background-color: aliceblue; padding: 5px;}
複製代碼 範例:- <style>
- table {
- border: 3px solid blue;
- }
- th {
- border: 2px solid green;
- background-color: aqua;
- padding: 5px;
- }
- td {
- border: 2px solid red;
- background-color: aliceblue;
- padding: 5px;
- }
- </style>
- <table border="1">
- <caption style="color:blue; caption-side: bottom;">學生成績</caption>
- <tr>
- <th>姓名</th>
- <th>科目</th>
- <th>分數</th>
- </tr>
- <tr>
- <td>小明</td>
- <td>數學</td>
- <td>85</td>
- </tr>
- <tr>
- <td>小華</td>
- <td>英文</td>
- <td>92</td>
- </tr>
- <tr>
- <td>小美</td>
- <td>歷史</td>
- <td rowspan="2">從缺</td>
- </tr>
- <tr>
- <td>阿華</td>
- <td>國文</td>
- </tr>
- </table>
複製代碼 |