當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML制作简单课表

發(fā)布時(shí)間：2024/3/12 HTML 44 豆豆

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

這篇文章適合新手使用HTML+CSS制作一張簡(jiǎn)單美觀的學(xué)生課表

這個(gè)案例是我Web技術(shù)的一個(gè)實(shí)驗(yàn)小作業(yè)，也是我作為新手制作的第一個(gè)HTML表格，雖然制作中會(huì)有一些問題，但還是最終被我克服并完成了

效果圖

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

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

首先是HTML 表格的基本結(jié)構(gòu)：

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

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

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

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

我是新手代碼有點(diǎn)長(zhǎng)別在意啊

實(shí)現(xiàn)代碼如下?

<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技 術(shù) 教3- 105 </td><td class="td" rowspan="2" bgcolor="#6CD4E1">移動(dòng)應(yīng) 用程序 開發(fā) 教3- 104 </td><td class="td" rowspan="2" bgcolor="#FF8465">深度學(xué) 習(xí) 教4- 104 </td><td> </td><td class="td" rowspan="2" bgcolor="#D8D8D8">移動(dòng)應(yīng) 用程序 開發(fā) 教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">深度學(xué) 習(xí) 教4- 104 </td><td> </td><td> </td><td class="td" rowspan="2" bgcolor="#88E5DA">Web技 術(shù) 教3- 105 </td><td class="td" rowspan="2" bgcolor="#6CD4E1">學(xué)習(xí)科 學(xué)與技 術(shù)（雙語） 教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">教育數(shù) 據(jù)挖掘 與學(xué)習(xí) 分析 教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>

代碼中并沒有注釋，是因?yàn)槲疫€是HTML新手小白的原因，所以還是在最后做一些說明吧。在style中定義的其實(shí)就是表格的單元格的大小。然后在body中，制作表格肯定少不了table這個(gè)標(biāo)簽，每?jī)蓚€(gè)<tr>...</tr>是表格的一行，每?jī)蓚€(gè)<td>...</td>是該行的一列，也就是單元格。

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

其它就沒有什么問題可以說的了，畢竟是個(gè)新手，暫時(shí)搞不出來什么大動(dòng)作，就這樣吧。

如有疑問，歡迎提問。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：《神经科学：探索脑》学习笔记（第19章
下一篇：前端学习资源