表格概說 ｜ table
表格概說 ｜ table
表格是網頁中常出現的元素，在傳統的網頁設計中表格除了有整理資料的功能外，還常被使用為整個頁面排版的工具，但是在CSS逐步展開WEB標準設定後，表格逐漸不再擔任重要的版面配置任務，而以DIV取代，但表格仍然在整理資料上，扮演重要的角色，本單元也以CSS搭配表格，講述如何以表格整理資料，並同時展現美感的部分，包含：色彩、標題、邊框、背景等。
| 標籤 | 屬性及說明 |
|---|---|
| < table > < /table > | 表格：< table >是用來標示表格的開頭和結尾。包含許多屬性，可用來設定整張表格的格式，以下是這些屬性的簡介：
|
| < caption > < /caption > |
|
| < thead > < /thead > | 表格標頭：< thead> 元素用於對HTML 表格中的表頭內容進行分組，而tfoot 元素用於對HTML 表格中的表注（頁腳）內容進行分組。 |
| < tbody > < /tbody > | 標籤表格主體（正文）： < tbody > 該標籤用於組合HTML 表格的主體內容。 |
| < tr > < /tr > | < tr >標籤是用以指示瀏覽器將文字顯示為一行表格列。 |
| < td > < /td > | < td >代表表格資料(Table Data)，用以指定表格內某一儲存格的內容 |
| < th > < /th > |
|
| scope |
|
表格各部分示意圖
表格示意範例
表格範例語法解析
表格｜html｜解析
請務必調整為與範例不同的設定
- 深色表格
- 淺色表格
可替換原來表格語法，方便對照註解修改
表格｜css｜解析
- 表格CSS解析
- 關於Tabel的CSS奇數偶數行顏色設定
可替換原來表格css語法( style.css 195 行起 )，方便對照註解修改，此處新增.table表格外框之設定
Google Fonts 網路中文字型
Google Fonts 網路中文字型
Google Fonts https://fonts.google.com
Google 3 款免費的中文網頁字型：
font-family: "Huninn", sans-serif;
font-family:"Noto Sans TC", sans-serif;
"font-family:"Noto Serif TC", sans-serif;
雲端字體下載網址：https://fonts.google.com/earlyaccess
目前可以在網頁上使用這些中文網路字型。以下為大家介紹如何使用這些 Google 推出的中文網路字型。
使用英文字體的方式也一樣，選擇喜歡的字體，試試看效果如何。
使用Google fonts黑體｜Noto Sans 思源黑體
Google fonts黑體｜Noto Sans 思源黑體
思源黑體是 Adobe 和 Google 共同開發的開放原始碼字型，發佈時就已支援繁體中文、簡體中文、日文及韓文，因此深受許多使用者喜愛。 Google Fonts 本身不會對流量或次數額度有所限制，且無須註冊或下載檔案，只要依照服務提供的字型 CSS 程式碼，套入自己的網站後稍作調整即可使用，非常簡單！
網站名稱：Google Fonts: Early Access
網站鏈結：https://fonts.google.com/earlyaccess開啟 Google Fonts: Early Access 頁面，找到 Noto Sans TC（Chinese Traditional），就能看到網站提供的程式碼，使用方法很簡單，只要把 Google Fonts 提供的那段 CSS 程式碼放入網站的 ＜head＞，或style.css檔案中，修改 CSS 來加入「Noto Sans TC」就能載入網頁字型。
Google fonts：Noto Sans TC (Chinese Traditional) 黑體（思源黑體）
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: 'Noto Sans TC',sans-serif;
正式版字體引入網址的最後面加上了 display=swap，這是讓字型遇到網路比較慢的狀況未能即時下載時，可以先顯示內建的字體，不至於讓網站有空白的空窗期。
使用Google fonts粉圓體字型
Google fonts粉圓體字型
@import url('https://fonts.googleapis.com/css2?family=Huninn&display=swap');
font-family: "Huninn", sans-serif;
Google fonts明體｜Noto Sans 思源明體
Google fonts明體｜Noto Sans 思源明體
@import url(https://fonts.googleapis.com/earlyaccess/notoserifttc.css);
font-family: 'Noto Serif TC', serif;
Google Fonts 網路英文字型
Google Fonts 網路英文字型
Google Fonts｜Google網頁字型 https://fonts.google.com
Google網頁字型列表，可選擇任一字體進入觀看
將想使用的字體加入字體選項，右邊出現語法連結，將之替換font-family選項。
或者進入雲端字體下載網址：https://fonts.google.com/earlyaccess
可直接選擇替換字體選項
