尤川豪   ·  5月前
Exp. 1,633  ·  213 貼文  ·  146 留言

自學網頁の嬰兒教材:第4課 ── 好用的表格

第4課 課程目標

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

能夠做出漂亮的表格

第4課 課程內容

用jsfiddle來練習:

https://jsfiddle.net

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

請閱讀這份教材:

HTML Tables

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

HTML 表格

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

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

接著閱讀下列這份教材,學習基本的表格美工:

Stylish CSS Tables Tutorial

第4課 作業

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

請前往

政府資料開放平台

或是

台北市政府資料開放平台

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

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

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

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

  分享   共 806 次點閱
共有 6 則留言
   ·  3月前
Exp. 62  ·  0 貼文  ·  7 留言

表格部分就比較好操作! 不過美工是照著Stylish CSS Tables Tutorial完成的。 這個網頁是在賣CSS的嗎? PS:感謝版主回覆的鼓勵! https://jsfiddle.net/KitHuang/Lmkqbwtx/22/

 
尤川豪   ·  3月前
Exp. 1,633  ·  213 貼文  ·  146 留言

對,那個網站應該是在賣一些 html/css 模板的

看到你做的「107年度友善廁所名單」囉

寫得非常好 你已經順利完成一張簡潔漂亮的 table

目標順利完成,期待看到你之後的其他作業~

 
feifeitzu   ·  2月前
Exp. 121  ·  0 貼文  ·  21 留言

這次的表格作業:https://jsfiddle.net/z91koaf8/4/ 謝謝版主!

 
尤川豪   ·  2月前
Exp. 1,633  ·  213 貼文  ·  146 留言

「臺北市環境教育場所」資料表格

寫得非常好、非常漂亮!

接近滿分!本課目標順利完成!

繼續加油!期待看到你的下一次作業!

   ·  2週前
Exp. 31  ·  0 貼文  ·  5 留言

嗨! 愚人節快樂!

這是表格的作業"台中市一月份十大易肇事路口"

表格的部分寫起來感覺很不一樣

https://jsfiddle.net/mooju7463/956tjb0z/

謝謝你的幫助!!!

 
尤川豪   ·  2週前
Exp. 1,633  ·  213 貼文  ·  146 留言

寫得很好!簡潔明瞭!

目標順利完成!

您的留言