第4課 課程目標

學會使用HTML的table來整理、顯示資料

能夠做出漂亮的表格

第4課 課程內容

用jsfiddle來練習:

https://jsfiddle.net

這次要寫HTML跟CSS兩個區塊~

請閱讀這份教材:

HTML Tables

不習慣看英文,可以改看這裡:

HTML 表格

把教學裡面的HTML、CSS程式碼,貼到 jsfiddle 裡面做練習,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果了。

讀完、練習完這份教學裡面的程式碼,就算是學會HTML table的用法了,可以用table來顯示各種資料了

接著請搜尋關鍵字 table css 美化,上網研讀一下各種文章,學習基本的表格美工。

第4課 作業

政府近年在提倡透明化,公佈了許多資料

請前往

政府資料開放平台

或是

台北市政府資料開放平台

挑選一份你有興趣的資料,利用本週學到的table,將資料用HTML表格呈現。

(資料量巨大的話,請在表格內呈現10筆資料即可。)

完成之後,請用CSS替表格加上美工。

完成這些,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 40 則留言

Stylish CSS Tables Tutorial 點下去變成404了

按讚的人:

謝謝回報,已移除連結

https://jsfiddle.net/yz8rjLp5/1/

按讚的人:

OK,順利過關!

按讚的人:

交作業~ https://jsfiddle.net/j437437/4m5jw8fk/164/

新收穫 : 原來表格裡面的標籤有這麼多種 td 代表的是 table data (知道意思後就好記多了XD)

按讚的人:

寫得很好,樣式很漂亮!

按讚的人:

完成交作業~~ https://jsfiddle.net/q8h3nf2L/2/ 麻煩站長檢查了!!!

按讚的人:

交作業,麻煩站長檢查 https://jsfiddle.net/johnny890118/rabhzt1L/3/

按讚的人:

交作業,再麻煩站長了,謝謝! https://glitch.com/edit/#!/make-up-table?path=index.html%3A11%3A85

那這個呢? https://glitch.com/edit/#!/make-up-table

按讚的人:

OK,有看到囉!順利完成!

按讚的人:

Link: https://jsfiddle.net/elmon/ng1jrd48/62/

可能挑到一個相對簡單一點的圖表了 不過我沒有對裡面的 Button 去改樣式 再請站長看看了 謝謝

按讚的人:

OK,順利過關!

按讚的人:

https://jsfiddle.net/973224/a0rdmtpn/134/ 交作業~

按讚的人:

https://jsfiddle.net/tsaii/pjfc20vo/48/ 交作業~

按讚的人:

https://jsfiddle.net/tony05060165/uo1zks35/122/ 作業完成

按讚的人:

https://jsfiddle.net/wimp9487/bvwfhxtd/68/ 交作業

按讚的人:

寫得很好,順利完成!

完成交作業~ https://jsfiddle.net/000dd/e36k8swz/106/

按讚的人:

寫得很好,順利完成!

來繳作業囉 https://jsfiddle.net/liang10000/mLnd78bv/66/

按讚的人:

交作業了~ https://jsfiddle.net/hqvs2mrk/1/

按讚的人:

寫得很好,順利完成!

交作業 https://jsfiddle.net/Chen_yi/70Lxbzho/30/

按讚的人:

參考網頁 https://data.taipei/dataset/detail?id=536e992c-7087-451c-a0aa-f47aa98406ac 作業 https://codepen.io/ChloeTseng1026/pen/qBgYPLp

交作業啦~~ image

按讚的人:

https://codepen.io/kwwlwfff-the-typescripter/pen/BabmOdz 交作業!

按讚的人:

交作業~ https://jsfiddle.net/IreneQiu/9z1s8wyx/56/

按讚的人:

2024.02.06 繳作業 https://jsfiddle.net/jdn4ftxg/

按讚的人:

繳交作業~感謝站長與其他學員 https://jsfiddle.net/eos8rckw/14/

按讚的人:

作業:https://jsfiddle.net/etai200/t9bv70x3/164/ 謝謝站長!不過不知道為什麼有些網站會被拒絕連線就是了QQ

按讚的人:

站長,我有一個問題, 請問是把 下載的檔案 (CSV) 用 CSS 的 table 顯示嗎? 謝謝~

按讚的人:

對,上面很多人都誤以為,是把官網的行政表格,直接模仿一份

其實應該是要把原始資料,用表格呈現

不過都會練習到 table,所以沒關係,都可以

謝謝 ! 交作業了~ https://jsfiddle.net/applelily/m10zqh76/8/

交作業囉:https://jsfiddle.net/max002215/tr410xgv/190/