[HTML][新手] 12. 表格介紹Table - 進度條

自從開始流行響應式頁面後，就幾乎沒有人使用

來做整個網頁的排版了。

但是如果是要使用「表格」的話，在語義上面最好還是使用比較好。

進度條 登入 線上教學 優惠組合 顧問服務 架站服務 所有文章 系列教學 筆記 [HTML][新手]12.表格介紹Table [HTML][新手]12.表格介紹Table 作者:進度條編輯群 更新日期: 2020/10/03 此文章也有影片介紹，可以搭配影片一起學習！ 01.表格介紹Table (所屬課程) 以下正式開始文章 表格介紹Table   這堂課要介紹表格的用法，在早期(約西元2000年)很多網站不是使用來做排版，所以如果看到網站的程式碼是用來做排版的話，代表它可能是年代久遠的網站了。

自從開始流行響應式頁面後，就幾乎沒有人使用來做整個網頁的排版了。

但是如果是要使用「表格」的話，在語義上面最好還是使用比較好。

    html的表格和word中的表格是同樣的概念，橫向是同一列，直向是同一行。

(備註：有時候會看到相反的說法，因為在大陸row是指的是行，column指的是列，如果真的記不起來就記得橫的是row，直的是column吧！不要讓翻譯對應問題困擾你。

)           比起列表(list)使用方式更為多元，主要是利用–表格標題、–表格主體、–表格註腳所組成的，每一個欄位都會由包起來，記法如下： 標籤–tablerow的簡寫，代表表格中的一列，每一列都會出現一個標籤 標籤中的欄位，包在標籤內 和標籤中的欄位，包在標籤內     我們先來練習建立一個表格標題吧！                                                                                                                                                          

標籤–tablehead的簡寫，用於
標籤–tabledata的簡寫，用於
1	2	3

       輸出結果：       這樣就成了一個row和三欄(th)的表格標題，其中border="1"代表開啟border。

(電腦世界中1代表開，0代表關。

到JavaScript階段會更明確一些。

)     接著建立tbody的部分，                                                               1             2             3                                                     1             2             3                                                     輸出結果：     這時你會發現thead和tbody的差別，thead是粗體，tbody的字體比較細。

接著我們幫它加上更多的欄位和內容：                                                               座號             姓名             分數                                                     1             John             99                                   2             Jason             60                                                                   2                                                                                                    輸出結果：         table還有一個很特別的地方，它可以利用屬性，在標籤加上colspan，做出類似合併欄位的效果。

例如代表占用兩個欄位的空間。

        但有一個要注意的地方，如果加上，但後面仍擺上2個標籤的話：                                                               座號             姓名             分數                                                     1             John             99                                   2             Jason             60                                                                   2                                                                                                    輸出結果：         則後面的兩個還是會顯示出來，那要怎麼做才不會讓最後一個 跑出來呢?很簡單，只要把最後一個 標籤刪除即可。

                                                              座號             姓名             分數                                                     1             John             99                                   2             Jason             60                                                                   2                                                                          輸出結果：         所以如果colspan是3的時候，後面的要再拿掉才行，我們另用style="text-align:right;將文字向右對齊，再把值更改一下：                                                               座號             姓名             現金                                                     1             John             100                                   2             Jason             60                                                                   小計:160                                                輸出結果：       不過這個table有點小，如果我們想把它放大一點，可以使用width這個屬性，在table標籤上調整，將table改成500px的絕對寬度：                                                               座號             姓名             現金                                                     1             John             100                                   2             Jason             60                                                                   小記:160