這個部分多出來的 border="1" 代表的是這個表格的邊框粗細是 1 的單位。HTML Table 有分為欄位與行（也許有些教科書不是這樣寫），這裡就以水平方向稱為欄位，垂直方向稱為行，水平方向的欄位是根據 | 與 | 標籤定義，每組 | 標籤代表一個欄位，標籤間可以放入內容；垂直方向的行則是透過 與
標籤所定義，每一組 |
標籤代表一個行，如範例中這樣只有一組 |
就是只有一行的表格，但這一行裡面有兩組 | 標籤，所以呈現出兩個欄位，有這樣的概念，我們就可以繼續看下一個範例。
範例二、多行 Table 表格
呈現結果
承襲自範例一的介紹，我們在範例二中使用了兩組 |
標籤，讓最終呈現的結果出現兩行的表格，這裡要注意的是每一組 |
標籤內，至少都必須搭配一組
| 標籤才算完整。
範例三、混和多欄與多行的 HTML Table 表格
| 第一行的第一個 TD 欄位 | 第一行的第二個 TD 欄位 |
| 第二行的第一個 TD 欄位 | 第二行的第二個 TD 欄位 |
呈現結果
| 第一行的第一個 TD 欄位 |
第一行的第二個 TD 欄位 |
| 第二行的第一個 TD 欄位 |
第二行的第二個 TD 欄位 |
範例三結合了前面兩個範例，設計出共有兩行且每一行都有兩個欄位的 Table，就像程式碼這樣，用了兩組 |
標籤，每一組內含兩組
| 欄位標籤，就可以有這樣的結果，相信看到這裡，對於 HTML Table 表格設計應該有了很清楚的概念，可以透過這些標籤的組合，設計出各式各樣的表格，如果能夠清楚掌握表格的設計，接著就可以對表格進行美化囉！
Facebook加入
LINE加入
2021/12/25
熱門推薦
留言回覆
