尤川豪   ·  11月前
Exp. 1,997  ·  255 貼文  ·  192 留言

自學網頁の嬰兒教材:第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替表格加上美工。

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

  分享   共 1,190 次點閱
共有 12 則留言
   ·  9月前
Exp. 62  ·  0 貼文  ·  7 留言

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

 
尤川豪   ·  9月前
Exp. 1,997  ·  255 貼文  ·  192 留言

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

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

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

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

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

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

 
尤川豪   ·  8月前
Exp. 1,997  ·  255 貼文  ·  192 留言

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

寫得非常好、非常漂亮!

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

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

   ·  6月前
Exp. 31  ·  0 貼文  ·  5 留言

嗨! 愚人節快樂!

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

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

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

謝謝你的幫助!!!

 
尤川豪   ·  6月前
Exp. 1,997  ·  255 貼文  ·  192 留言

寫得很好!簡潔明瞭!

目標順利完成!

   ·  3月前
Exp. 36  ·  0 貼文  ·  6 留言

HI~~版主,完成好表格作業了,再請版主幫我看~謝謝^^

作業: https://jsfiddle.net/hannahtest190619/j7wovb65/

 
尤川豪   ·  2月前
Exp. 1,997  ·  255 貼文  ·  192 留言

2017-各類初任人員月平均經常性薪資

作業做得很漂亮

目標順利完成~

Clucky Lai   ·  2月前
Exp. 42  ·  0 貼文  ·  7 留言

老師好,我完成第4課的作業了: 作業:https://glitch.com/~pebble-paddleboat 謝謝老師。

 
尤川豪   ·  2月前
Exp. 1,997  ·  255 貼文  ·  192 留言

107年各行政后房屋法定租金上限參考表

寫得很棒,沒問題

目標都有達成!

陳楚瑜  ·  1月前
Exp. 44  ·  0 貼文  ·  6 留言

老師好,我完成第4課的作業了: 作業:https://jsfiddle.net/ccyingo/yz3k5f7h/34/ 謝謝老師。

 
尤川豪   ·  4週前
Exp. 1,997  ·  255 貼文  ·  192 留言

北市高校總表

寫得很好~!

目標順利完成,繼續保持~!

您的留言