HTML表格的基礎- 學習該如何開發Web
文章推薦指數： 80 %
表格是一個由列和欄組成的結構化資料(tabular data)。
表格能幫助你快速查看不同資料類型間的關聯值。
例如人和年紀、一周當中的某天或是地方游泳池的 ...
SkiptomaincontentSkiptosearchSkiptoselectlanguage學習該如何開發Web學習HTML：指南與教學HTML表格HTML表格的基礎ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.什麼是表格?主動學習:建造你第一個表格用
先備知識: HTML的基礎(見介紹HTML) 目標: 對HTML表格有基本的認識 什麼是表格?表格是一個由列和欄組成的結構化資料(tabulardata)。
表格能幫助你快速查看不同資料類型間的關聯值。
例如人和年紀、一周當中的某天或是地方游泳池的時間表。
表格在人類社會當中被廣泛使用且已經有很久的歷史，如下是美國1800年的人口普查紀錄表格。
這也難怪HTML的開創者要提供一個在網路建立和呈現表格化資料的方法。
表格是怎麼運作的呢?表格是精確的，資訊可以透過列和欄位名稱之間的視覺關聯輕鬆呈現。
觀察以下表格，利用列和欄目名稱找出有62個衛星的類木行星。
有關太陽系星球的資訊(真實資料取自 Nasa'sPlanetaryFactSheet-Metric.) 名稱 質量(1024kg) 直徑(km) 密度(kg/m3) 重力(m/s2) 一天的長度(小時) 和太陽的距離(106km) 平均溫度(°C) 衛星的數目 備註 陸地行星 水星 0.330 4,879 5427 3.7 4222.6 57.9 167 0 最接近太陽 金星 4.87 12,104 5243 8.9 2802.0 108.2 464 0 地球 5.97 12,756 5514 9.8 24.0 149.6 15 1 我們的世界 火星 0.642 6,792 3933 3.7 24.7 227.9 -65 2 紅色星球 類木行星 氣態巨行星 木星 1898 142,984 1326 23.1 9.9 778.6 -110 67 最大的星球 土星 568 120,536 687 9.0 10.7 1433.5 -140 62 冰質巨行星 天王星 86.8 51,118 1271 8.7 17.2 2872.5 -195 27 海王星 102 49,528 1638 11.0 16.1 4495.1 -200 14 矮行星 冥王星 0.0146 2,370 2095 0.7 153.3 5906.4 -225 5 在2006年被從行星類別中除名，但這還些爭議。
在正確執行之下，就連視障者都可以把表格資料詮釋為HTML格式的表格。
一份成功的HTML表格就應該如此提升視障者的使用經驗。
表格樣式你也可以在GitHub上看看實際範例!而你也許會注意到那裡的表格似乎更容易閱讀。
那是因為這裡的表格只有加上很少樣式，而GitHub上的版本卻應用上了更多明顯的CSS。
需要弄清楚的一點是:要讓表格在網頁上有效呈現需要提供紮實的HTML架構和CSS樣式資訊，但將在這個模組中聚焦在HTML的部分。
若想瞭解CSS的部分，可以在完成這部分閱讀之後造訪表格樣式設計(en-US)的文章。
在這個單元裡我們將不會聚焦在CSS上，但是我們提供基本的CSS樣式表讓你做使用，這將會使你製作的表格比起毫無修飾的預設樣式更方便閱讀。
你能在這找到樣式表，並且你也能找到一個適用於樣式表的HTML模版 —他們能一起讓你有個好起點來實驗HTML表格。
當何時你不應該使用HTML表格?HTML表格應該被使用在結構化資料(tabulardata)上—這就是它們被設計的目的。
不幸地是，許多人習慣使用HTML表格去排版他們的網頁，例如:使用一列去當header，一列當做內容欄位，一列當作footer...等等，你能在我們的輔助學習單元裡的頁面輸出(en-US)發現更多細節以及一個範例。
它曾經被這麼使用是因為CSS過去在不同瀏覽器之間的支援程度十分可怕;如今，已非常少在用表格做排版，但你仍然可能在網路的一些邊邊角角見到。
簡單來說，使用表格排版而非使用CSS排版技術是一件很糟的事情。
下列是主要原因: 表格排版會減少對視障使用者的輔助 :視障者使用的螢幕閱讀器(en-US)會翻譯存在於HTML網頁的標籤並對使用者念出內容。
由於表格並不是正確的排版工具，並且標示方式遠複雜於CSS排版技術，所以螢幕閱讀器輸出的內容會使他們的使用者感到困惑。
表格會產生標籤雜燴(tagsoup):就像上面提到的，表格排版通常會比一般適當的輸出技術包含更複雜的標籤結構。
這會導致程式碼本身更難撰寫、維護及debug。
表格不會自適應(automaticallyresponsive):當你使用合適的排版容器(像是{htmlelement("header")},
),它們的寬度相對於父層預設為100%，而表格的預設大小是依據它們的內容物，所以當表格樣式要有效的在不同的裝置之間運行時，會需要做額外的測量調整。
主動學習:建造你第一個表格關於表格的理論我們已經談論夠了，所以，來深入實際的例子並建立一個簡單的表格吧! 第一件事，在自己的電腦複製一份新的空白模板.html 以及簡易表格.css 每一個表格裡的內容都是由這兩個標籤所組成:
將這些放入你的HTML中的body。
表格裡最小的容器是表格儲存格，由元素所組成('td'代表 'tabledata')。
將下列的程式碼加入你的表格標籤之中:
Hi,I'myourfirstcell.
如果我們想要一個四格儲存格寬的列(row),我們需要複製這些標籤三次。
將你的表格內容更新成這樣:Hi,I'myourfirstcell.
I'myoursecondcell.
I'myourthirdcell.
I'myourfourthcell.
就像你看到的，儲存格不會在各自的下方，它們彼此自動排列在同一列上。
每個元素會創造單個儲存格並且使它們據在同一行，我們新增的每一個儲存格都會使列更長。
要讓這個列停止增加並開始在下一列增加連續的儲存格的話，我們需要用
元素('tr'代表 'tablerow')，現在來探討一下:
放置四個你已新增在
標籤裡的儲存格,像這樣:
Hi,I'myourfirstcell.
I'myoursecondcell.
I'myourthirdcell.
I'myourfourthcell.
現在你已經製作了一列了，可以再繼續做一、二列—每個列都需要被額外的 元素包裹住,並且每個儲存格都須包含在一個 內
表格應該會看起來像下面這樣:
Hi,I'myourfirstcell.
I'myoursecondcell.
I'myourthirdcell.
I'myourfourthcell.
Secondrow,firstcell.
Cell2.
Cell3.
Cell4.
Note:你也可以在GitHub上看到 simple-table.html(seeitlivealso).
用
加上標頭元素現在，讓我們把注意力轉移到表格的標頭(tableheader)—存在於一列或一欄開頭的特別儲存格並且定義了欄或列中內容的資料型態(舉個例子,看看這篇文章中第一個範例裡的"Person"和"Age"儲存格 )。
為了說明為什麼它們很有用，請看下面的表格例子,首先是程式碼:
這是實際渲染出的表格:
Knocky
Flor
Ella
Juan
Breed
JackRussell
Poodle
Streetdog
CockerSpaniel
Age
16
9
10
5
Owner
Mother-in-law
Me
Me
Sister-in-law
EatingHabits
Eatseveryone'sleftovers
Nibblesatfood
Heartyeater
Willeattillheexplodes
這裡的問題在於，當你找到想知道的資料時，並不容易去找到資料之間對應的位置。
如果欄跟列能有個明顯的標示，會比較好理解。
主動學習:表格標頭讓我們來繼續改善這個表格吧! 首先,複製 dogs-table.htmlandminimal-table.css檔案到你的電腦。
這份HTML裡包含跟底下你看到的一樣的狗狗範例。
為了在語意上和視覺上辨識表格的標頭，你可以使用
元素 ('th'代表'tableheader')。
它的運作方式跟
完全相同，除了它表示的是標頭而非一般儲存格外。
繼續修改你的HTML將所有外圍的
元素變成
元素。
儲存你的HTML並在瀏覽器上執行，現在你應該可以看到標頭應有的樣子。
Note:你可以在GitHub上的dogs-table-fixed.html找到我們寫好的完整的範例(直接看看長怎樣). 標頭為什麼實用?我們已經部分解答了這個問題 —當有標頭清楚標示時，它能更簡單的使你找到資料並讓整體設計看起來更完整。
Note:表格標頭有具備預設樣式 —粗體並置中，即使你不加上你自己的表格樣式，他們仍然能被凸顯。
表格標頭還有一個額外的好處—伴隨著作用域(scope) 屬性 (我們將會在下一個章節中學到)，當要連結每個標頭而所有資料都在同一列或欄時，這能允許表格使用起來更無障礙。
並且，螢幕閱讀器能一次性讀出完整一列或一欄的資料，這是非常實用的。
允許列或欄的儲存格合併有時我們想要儲存格涵蓋複數的列或欄，來看看下列顯示常見動物名稱的簡單例子。
在某些案例，我們想要將名字代表雄性或雌性顯示在動物名字旁邊，但有些不需要，這種情況下我們只想將動物名字橫跨整個表格。
初始架構會看起來像這樣:
但輸出的不如我們想要的樣子:
Animals
Hippopotamus
Horse
Mare
Stallion
Crocodile
Chicken
Hen
Rooster
我們需要一種方式讓"Animals","Hippopotamus",和 "Crocodile"橫跨兩個欄位,然後讓 "Horse"and"Chicken"向下合併兩列儲存格。
幸運地是，表格標頭和儲存格有 colspan 和 rowspan 屬性，可以讓我們這樣做。
兩者都接受無單位的數值等同於你想合併的列或欄的數量。
舉例來說，colspan="2"會讓這個儲存格合併兩欄。
來使用 colspan 和 rowspan來改善這麼表格吧! 首先，複製一份我們的 animals-table.html 和 minimal-table.css檔案在你的電腦上。
這個HTML包含跟上面同樣的動物範例。
接著，使用 colspan 來讓"Animals","Hippopotamus",和"Crocodile"合併橫跨兩個欄位。
最後,使用 rowspan 來讓 "Horse"and"Chicken"合併橫跨兩列。
儲存並在瀏覽器上檢視你改善後的程式碼。
Note:你可以在GitHub上的 animals-table-fixed.html找到我們寫好的完整的範例(seeitlivealso). Providingcommonstylingtocolumns在我們繼續下去前，我們將要告訴你這節文章最後一個重點。
HTML有一個一次定義一整欄樣式資訊的方法— 元素。
Theseexistbecauseitcanbeabitannoyingandinefficienthavingtospecifystylingoncolumns—yougenerallyhavetospecifyyourstylinginformationoneveryor
inthecolumn,oruseacomplexselectorsuchas:nth-child()(en-US).
Note:Stylingcolumnslikethisislimitedtoafewproperties:border,background,width,andvisibility.Tosetotherpropertiesyou'llhavetoeitherstyleevery
or
inthecolumn,oruseacomplexselectorsuchas:nth-child()(en-US).
Takethefollowingsimpleexample:
Whichgivesusthefollowingresult:
Data1
Data2
Calcutta
Orange
Robots
Jazz
Thisisn'tideal,aswehavetorepeatthestylinginformationacrossallthreecellsinthecolumn(we'dprobablyhaveaclasssetonallthreeinarealprojectandspecifythestylinginaseparatestylesheet).Insteadofdoingthis,wecanspecifytheinformationonce,onacontainerjustbelowtheopeningtag.Wecouldcreatethesameeffectasweseeabovebyspecifyingourtableasfollows:
Effectivelywearedefiningtwo"stylecolumns",onespecifyingstylinginformationforeachcolumn.Wearenotstylingthefirstcolumn,butwestillhavetoincludeablank
Justlikecolspanandrowspan,spantakesaunitlessnumbervaluethatspecifiesthenumberofcolumnsyouwantthestylingtoapplyto.Activelearning:colgroupandcolNowit'stimetohaveagoyourself.
Belowyoucanseethetimetableofalanguagesteacher.OnFridayshehasanewclassteachingDutchallday,butshealsoteachesGermanforafewperiodsonTuesdayandThursdays.Shewantstohighlightthecolumnscontainingthedayssheisteaching.
Recreatethetablebyfollowingthestepsbelow.
First,makealocalcopyofourtimetable.htmlfileinanewdirectoryonyourlocalmachine.TheHTMLcontainsthesametableyousawabove,minusthecolumnstylinginformation.
Addaelementatthetopofthetable,justunderneaththetag,inwhichyoucanaddyour
主動學習:建造你第一個表格關於表格的理論我們已經談論夠了，所以，來深入實際的例子並建立一個簡單的表格吧! 第一件事，在自己的電腦複製一份新的空白模板.html 以及簡易表格.css 每一個表格裡的內容都是由這兩個標籤所組成:
表格裡最小的容器是表格儲存格，由
將下列的程式碼加入你的表格標籤之中:
將你的表格內容更新成這樣:
每個
要讓這個列停止增加並開始在下一列增加連續的儲存格的話，我們需要用
為了說明為什麼它們很有用，請看下面的表格例子,首先是程式碼:
| Knocky | Flor | Ella | Juan | |
| Breed | JackRussell | Poodle | Streetdog | CockerSpaniel |
| Age | 16 | 9 | 10 | 5 |
| Owner | Mother-in-law | Me | Me | Sister-in-law |
| EatingHabits | Eatseveryone'sleftovers | Nibblesatfood | Heartyeater | Willeattillheexplodes |
如果欄跟列能有個明顯的標示，會比較好理解。
主動學習:表格標頭讓我們來繼續改善這個表格吧! 首先,複製 dogs-table.htmlandminimal-table.css檔案到你的電腦。
這份HTML裡包含跟底下你看到的一樣的狗狗範例。
為了在語意上和視覺上辨識表格的標頭，你可以使用
它的運作方式跟
繼續修改你的HTML將所有外圍的
儲存你的HTML並在瀏覽器上執行，現在你應該可以看到標頭應有的樣子。
Note:你可以在GitHub上的dogs-table-fixed.html找到我們寫好的完整的範例(直接看看長怎樣). 標頭為什麼實用?我們已經部分解答了這個問題 —當有標頭清楚標示時，它能更簡單的使你找到資料並讓整體設計看起來更完整。
Note:表格標頭有具備預設樣式 —粗體並置中，即使你不加上你自己的表格樣式，他們仍然能被凸顯。
表格標頭還有一個額外的好處—伴隨著作用域(scope) 屬性 (我們將會在下一個章節中學到)，當要連結每個標頭而所有資料都在同一列或欄時，這能允許表格使用起來更無障礙。
並且，螢幕閱讀器能一次性讀出完整一列或一欄的資料，這是非常實用的。
允許列或欄的儲存格合併有時我們想要儲存格涵蓋複數的列或欄，來看看下列顯示常見動物名稱的簡單例子。
在某些案例，我們想要將名字代表雄性或雌性顯示在動物名字旁邊，但有些不需要，這種情況下我們只想將動物名字橫跨整個表格。
初始架構會看起來像這樣:
| Animals | |
|---|---|
| Hippopotamus | |
| Horse | Mare |
| Stallion | |
| Crocodile | |
| Chicken | Hen |
| Rooster |
幸運地是，表格標頭和儲存格有 colspan 和 rowspan 屬性，可以讓我們這樣做。
兩者都接受無單位的數值等同於你想合併的列或欄的數量。
舉例來說，colspan="2"會讓這個儲存格合併兩欄。
來使用 colspan 和 rowspan來改善這麼表格吧! 首先，複製一份我們的 animals-table.html 和 minimal-table.css檔案在你的電腦上。
這個HTML包含跟上面同樣的動物範例。
接著，使用 colspan 來讓"Animals","Hippopotamus",和"Crocodile"合併橫跨兩個欄位。
最後,使用 rowspan 來讓 "Horse"and"Chicken"合併橫跨兩列。
儲存並在瀏覽器上檢視你改善後的程式碼。
Note:你可以在GitHub上的 animals-table-fixed.html找到我們寫好的完整的範例(seeitlivealso). Providingcommonstylingtocolumns在我們繼續下去前，我們將要告訴你這節文章最後一個重點。
HTML有一個一次定義一整欄樣式資訊的方法—
Theseexistbecauseitcanbeabitannoyingandinefficienthavingtospecifystylingoncolumns—yougenerallyhavetospecifyyourstylinginformationonevery
| Data1 |
|---|
| Calcutta |
| Robots |
| Data1 | Data2 |
|---|---|
| Calcutta | Orange |
| Robots | Jazz |
延伸文章資訊
- 1Tables Generator 線上製作產生表格HTML - 免費資源網路社群
Tables Generator 線上製作產生表格HTML、LaTeX、Markdown 原始碼. 如果有接觸過網頁設計或曾經嘗試在網站、部落格放入表格，應該會覺得表格（Tables）是一個非常...
- 2HTML表格的基礎- 學習該如何開發Web
表格是一個由列和欄組成的結構化資料(tabular data)。表格能幫助你快速查看不同資料類型間的關聯值。例如人和年紀、一周當中的某天或是地方游泳池的 ...
- 3網頁設計進階【第6 章製作表格】
第1 頁. 網頁設計進階【第6 章製作表格】. 班級：. 座號： 姓名：. （一）表格基本標籤：<table>、<tr>、<td> 課本6-3. <table border="1">. <tr>...
- 4網頁插入表格不再麻煩﹍線上產生器+ 可匯入CSV 檔(Tables ...
三、搭配RWD 表格外掛 · 因為RWD 外掛Basic Table 本身自帶CSS 樣式，因此只需要陽春表格HTML 語法即可 · 按照本篇表格產生器Tables Generator 流程製作...
- 5HTML 表格 - 菜鸟教程
表格 这个例子演示如何在HTML 文档中创建表格。 （可以在本页底端找到更多实例。） HTML 表格. 表格由<table> 标签来定义。每个表格均有若干行（由<tr> 标签定义），每 ...
