CSS表格是一種常用的網頁排版方式,可以用來布局各種表格。下面我們來學習如何使用CSS表格來制作課程表。
/* 設置表格樣式 */ table { border-collapse: collapse; width: 100%; } /* 設置表格的字體、邊框、背景色等樣式 */ td { font-family: Arial, sans-serif; border: 1px solid black; background-color: #fff; padding: 0.5rem; } /* 設置表格的標題行樣式 */ thead td { font-weight: bold; background-color: #f2f2f2; } /* 設置表格的奇偶行背景色 */ tr:nth-child(even) td { background-color: #f2f2f2; } tr:nth-child(odd) td { background-color: #fff; }
使用以上CSS樣式,我們可以輕松的創建一個課程表,具體代碼如下:
<table> <caption>2022年春季課程表</caption> <thead> <tr> <td>時間\星期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> </tr> </thead> <tbody> <tr> <td>8:00-10:00</td> <td>英語口語</td> <td>數學課</td> <td>物理實驗</td> <td>語文課</td> <td>英語聽力</td> </tr> <tr> <td>10:00-12:00</td> <td>Java編程</td> <td>文化史</td> <td>網絡安全</td> <td>籃球課</td> <td>音樂欣賞</td> </tr> <tr> <td>14:00-16:00</td> <td>文學欣賞</td> <td>英語寫作</td> <td>體育比賽</td> <td>數據庫原理</td> <td>編程實踐</td> </tr> <tr> <td>16:00-18:00</td> <td>創新工程</td> <td>藝術設計</td> <td>社區服務</td> <td>數學建模</td> <td>職業技能</td> </tr> </tbody> </table>
以上就是一個簡單的CSS表格制作課程表的例子,大家可以按照自己的需求進行改寫。
上一篇css表格上下寬度不一致
下一篇css表情允許左右有浮動