【HTML系列#8】table 表格介紹與教學,5 分鐘搞懂表格!

HTML table

HTML語法中最常被用到也最重要的標籤就是table標籤了,但是 table 的語法你都知道嗎?

HTML table 的用途非常多,可以是資訊整合、成績公佈或表單等等,雖然現在CSS出現之後慢慢被取代

但是知道最原始語法,對於之後編程也是有幫助的!快來看看本篇介紹吧!

本篇內容包含 :

  • HTML table 是什麼?
  • table 怎麼用?
  • table 的 Q&A

前端入門系列 – HTML篇

本系列會介紹與教學關於HTML最基礎的知識語法,歡迎分享與留言討論!

HTML系列#1: 【HTML系列#1】HTML是什麼?5分鐘做出簡易網頁!

HTML系列#2: 【HTML系列#2】h1~h6介紹與教學,影響SEO的重要關鍵!

HTML系列#3: 【HTML系列#3】div、p、span 介紹與教學,區塊、段落一篇搞懂!

HTML系列#4: 【HTML系列#4】br、hr、& nbsp 介紹與教學,輕鬆加上斷行、分隔線與空格!

HTML系列#5: 【HTML系列#5】href、a、target介紹與教學,一起自訂傳送門!

HTML系列#6: 【HTML系列#6】ul、ol 介紹與教學,一招搞定清單列表!

HTML系列#7: 【HTML系列#7】img 介紹與教學,一行指令豐富你的網頁!

HTML系列#8: 【HTML系列#8】table 表格介紹與教學,5 分鐘搞懂表格!

HTML系列#9: 【HTML系列#9】iframe 介紹與教學,一招輕鬆嵌入影片!

HTML table 是什麼?

table 表格

HTML table 表格是網頁設計當中算是很重要的元素,相對的設計上也有點複雜,對於RWD響應式網頁來說會有點麻煩

表格通常用來做版面的排版,而表格必須包含幾個核心標籤才能組成表格



table 的核心標籤

table 表格標籤

表格最外層的標籤就是 table ,需要起始標籤與結束標籤,會把整個表格內容包起來

HTML table
table 表格標籤

tr 行標籤

tr 是一行一行的語法標籤,需要起始標籤與結束標籤,通常會包覆 td 一起做使用

HTML tr
tr 行標籤

td 列標籤

td 為一列一列的語法標籤,它也需要起始標籤與結束標籤,而內容通常放在 td 這個標籤裡面

HTML td
td 列標籤

HTML table 範例影片 (英文版)




table 怎麼用?

table、tr、td 綜合使用

因為這三者的關係非常密切,一個完整的表格也需要三者一起組成,因此這邊一起介紹使用

table為最外層的標籤,裡面會包覆著 tr 與 td ,大家比較習慣的是把內容放在 td 裡面,之後再修改整個表格的樣式

而表格的寫法為「<table> <tr> <td>內容</td> </tr> </table>」,寫法比較複雜,所以大家可以看下方範例,為了清楚看到表格,我將會加上border框線顯示來舉例

程式碼範例 #1

一個 tr 配上多個 td

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <table border="1">
        <tr>
            <td>表格內容 A</td>
            <td>表格內容 B</td>
            <td>表格內容 C</td>
        </tr>
    </table>
    
</body>
</html>
一個tr配多個td範例程式碼
一個 tr 配上多個 td 範例程式碼

輸出結果 #1

一個tr配多個td輸出結果
一個tr配多個td 輸出結果


程式碼範例 #2

多個 tr 配上一個 td

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <table border="1">
        <tr>
            <td>表格內容 A</td>
        </tr>
        <tr>
            <td>表格內容 B</td>
        </tr>
        <tr>
            <td>表格內容 C</td>
        </tr>
    </table>
    
</body>
</html>
多個tr配一個td範例程式碼
多個tr配一個td 範例程式碼

輸出結果 #2

多個tr配一個td輸出結果
多個tr配一個td 輸出結果


程式碼範例 #3

多個 tr 配上多個 td

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <table border="1">
        <tr>
            <td>表格內容 A1</td>
            <td>表格內容 A2</td>
        </tr>
        <tr>
            <td>表格內容 B1</td>
            <td>表格內容 B2</td>
        </tr>
        <tr>
            <td>表格內容 C1</td>
            <td>表格內容 C2</td>
        </tr>
    </table>
    
</body>
</html>
多個tr配多個td範例程式碼
多個tr配多個td 範例程式碼

輸出結果 #3

多個tr配多個td輸出結果
多個tr配多個td 輸出結果


table 的 Q&A

Q1 : table 裡面的 tr 和 td 可以放多少個?

A1 :

可以放無限多個,但是這樣網頁或文章會變得很長,使用者體驗會很差,相對的SEO就會變差


Q2 : table 裡面可以再包一層 table 嗎?

A2 :

目前我個人沒有看過這種寫法,也不建議嘗試用這種寫法,因為表格本身就是很複雜的組成,如果變得更複雜對於網站沒有幫助


Q3 : table 的樣式可以透過 CSS 調整嗎?

A3 :

可以,調整的樣式包括字型大小、邊框、背景顏色等等,通常這些樣式在很多套件裡都有,最常見的就是Bootstrap

想了解更多Bootstrap或課程,可以看以下這篇文章!
延伸閱讀: 六角學院Bootstrap課程介紹與心得



總結

table 對於很多網站來說是很重要的元素,雖然現在很多套件已經寫好可以直接套用

但是對於了解原始程式碼在開發或使用時,一定多少會有一些幫助

希望這篇文章有幫助到不懂 HTML table 的人,謝謝大家!



Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top