當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML制作简单课表

發布時間：2024/3/12 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML制作简单课表小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這篇文章適合新手使用HTML+CSS制作一張簡單美觀的學生課表

這個案例是我Web技術的一個實驗小作業，也是我作為新手制作的第一個HTML表格，雖然制作中會有一些問題，但還是最終被我克服并完成了

效果圖

本案例最直觀最突出的可能就是它的簡潔特色了，只寫出必要的信息而省去不必要的裝飾，避免表格的單調，添加了色彩，使表格更具有豐富性得同時，又突出了表格的重點所在位置，一舉兩得。除此之外，這個表格并沒有設置表格邊框，不局限于傳統的表格，突出簡潔的主題的同時又讓人一樣看出不同。

接下來說一下HTML表格制作的一些小知識吧。

首先是HTML 表格的基本結構：

<table>…</table>：定義表格

<th>…</th>：定義表格的標題欄（文字加粗）

<tr>…</tr>：定義表格的行

<td>…</td>：定義表格的列

我是新手代碼有點長別在意啊

實現代碼如下?

<html> <head> <title>課表</title> <style> .td{width:60px;height=900px; } </style> </head> <body> <table> <tr align=center><td></td><td class="td">周一</td><td class="td">周二</td><td class="td">周三</td><td class="td">周四</td><td class="td">周五</td><td class="td">周六</td><td class="td">周天</td></tr><tr align=center><td class="td">1 8:00 8:45 </td><td class="td" rowspan="2" bgcolor="#FFB677">Web技 術 教3- 105 </td><td class="td" rowspan="2" bgcolor="#6CD4E1">移動應 用程序 開發 教3- 104 </td><td class="td" rowspan="2" bgcolor="#FF8465">深度學 習 教4- 104 </td><td> </td><td class="td" rowspan="2" bgcolor="#D8D8D8">移動應 用程序 開發 教3- 104 </td><td> </td><td> </td></tr> <tr align=center><td class="td">2 8:50 9:35 </td><td> </td><td> </td><td> </td></tr> <tr align=center><td class="td">3 9:50 10:35 </td><td class="td" rowspan="2" bgcolor="#FFB677">深度學 習 教4- 104 </td><td> </td><td> </td><td class="td" rowspan="2" bgcolor="#88E5DA">Web技 術 教3- 105 </td><td class="td" rowspan="2" bgcolor="#6CD4E1">學習科 學與技 術（雙語） 教3- 104 </td><td> </td><td> </td></tr> <tr align=center><td class="td">4 10:40 11:25 </td><td> </td><td> </td><td> </td><td> </td></tr> <tr align=center><td class="td">5 11:30 12:15 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr align=center><td class="td">6 13:45 14:30 </td><td class="td" rowspan="2" bgcolor="#88E5DA">教育研 究方法 教3- 104</td><td class="td" rowspan="2" bgcolor="#FFB677">教育數 據挖掘 與學習 分析 教3- 104</td><td> </td><td class="td" rowspan="2" bgcolor="#F4C762"> 毛澤東 思想和 中國特 色社... 教3- 408</td></tr> <tr align=center><td class="td">7 14:35 15:20 </td><td> </td><td> </td><td> </td><td> </td></tr> <tr align=center><td class="td">8 15:35 16:20 </td><td class="td" rowspan="2" bgcolor="#FF8465"> 毛澤東 思想和 中國特 色社... 教3- 408</td><td> </td><td> </td><td> </td><td> </td><td> </td><td class="td" rowspan="2" bgcolor="#B2ED75"> + 添加 課程</td></tr> <tr align=center><td class="td">9 16:25 17:10 </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr align=center><td class="td">10 18:30 17:15 </td><td> </td><td> </td><td> </td><td> </td><td> </td> <td> </td><td> </td></tr> <tr align=center><td class="td">11 19:25 20:10 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> <tr align=center><td class="td">12 20:20 21:05 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> </table> </body> </html>

代碼中并沒有注釋，是因為我還是HTML新手小白的原因，所以還是在最后做一些說明吧。在style中定義的其實就是表格的單元格的大小。然后在body中，制作表格肯定少不了table這個標簽，每兩個<tr>...</tr>是表格的一行，每兩個<td>...</td>是該行的一列，也就是單元格。

制作過程中遇到的問題是怎么合并單元格，也就是圖中上下兩個相鄰的單元格怎么合并成一個，后來發現rowspan 屬性規定單元格可橫跨的行數，rowspan=2，就可以實現合并兩個單元格的效果了。值得注意的是，在上面一個單元格合并下面一格單元格后，下面一行定義的時候就要少寫一個<td></td>，不然會出錯哦。

其它就沒有什么問題可以說的了，畢竟是個新手，暫時搞不出來什么大動作，就這樣吧。

如有疑問，歡迎提問。

總結

以上是生活随笔為你收集整理的HTML制作简单课表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：《神经科学：探索脑》学习笔记（第19章
下一篇： 2017年html5行业报告,云适配发布