學會使用HTML的table來整理、顯示資料
能夠做出漂亮的表格
用jsfiddle來練習:
https://jsfiddle.net
這次要寫HTML跟CSS兩個區塊~
請閱讀這份教材:
不習慣看英文,可以改看這裡:
把教學裡面的HTML、CSS程式碼,貼到 jsfiddle 裡面做練習,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果了。
讀完、練習完這份教學裡面的程式碼,就算是學會HTML table的用法了,可以用table來顯示各種資料了
接著請搜尋關鍵字 table css 美化
,上網研讀一下各種文章,學習基本的表格美工。
政府近年在提倡透明化,公佈了許多資料
請前往
或是
挑選一份你有興趣的資料,利用本週學到的table,將資料用HTML表格呈現。
(資料量巨大的話,請在表格內呈現10筆資料即可。)
完成之後,請用CSS替表格加上美工。
完成這些,你就完成這次的課程目標了!
歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!
可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!
發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!
貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!
未來面試時,分享給面試官看,會讓人知道你的積極程度!
https://jsfiddle.net/yz8rjLp5/1/
交作業~ 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
Link: https://jsfiddle.net/elmon/ng1jrd48/62/
可能挑到一個相對簡單一點的圖表了 不過我沒有對裡面的 Button 去改樣式 再請站長看看了 謝謝
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://data.taipei/dataset/detail?id=536e992c-7087-451c-a0aa-f47aa98406ac 作業 https://codepen.io/ChloeTseng1026/pen/qBgYPLp
交作業啦~~
站長,我有一個問題, 請問是把 下載的檔案 (CSV) 用 CSS 的 table 顯示嗎? 謝謝~
20240627交作業,一開始有在表格變色th:nth-child(odd)這邊卡住,因為標題欄也會被更改到,但把它改成th:nth-child(even)在把背景色調整就用好了,另外hover變色只變偶數欄的部分也是突發奇想的用th:nth-child(even):hover試試看,結果居然成功了,想想還是覺得很神奇! https://eager-nettle-pharaoh.glitch.me/
Stylish CSS Tables Tutorial 點下去變成404了