標題:
CSS 表格資料
[打印本頁]
作者:
陳育霖
時間:
2023-8-29 13:44
標題:
CSS 表格資料
本帖最後由 陳育霖 於 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>
複製代碼
歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/)
Powered by Discuz! 7.2