第4課 課程目標
學會使用HTML的table來整理、顯示資料
能夠做出漂亮的表格
第4課 課程內容
用jsfiddle來練習：
https://jsfiddle.net
這次要寫HTML跟CSS兩個區塊～
請閱讀這份教材：
不習慣看英文，可以改看這裡：
把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。
讀完、練習完這份教學裡面的程式碼，就算是學會HTML table的用法了，可以用table來顯示各種資料了
接著請搜尋關鍵字 table css 美化，上網研讀一下各種文章，學習基本的表格美工。
第4課 作業
政府近年在提倡透明化，公佈了許多資料
請前往
或是
挑選一份你有興趣的資料，利用本週學到的table，將資料用HTML表格呈現。
（資料量巨大的話，請在表格內呈現10筆資料即可。）
完成之後，請用CSS替表格加上美工。
完成這些，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
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了