tr td 是什麼？深入解析HTML表格中的關鍵元素與應用

Byadmin

tr td 是什麼？深入解析HTML表格中的關鍵元素與應用

哈囉！如果你最近在接觸網頁開發，或是稍微研究了一下網頁的結構，很有可能就會遇到 <tr> 和 <td> 這兩個 HTML 標籤，對吧？
可能你心裡正納悶：「tr td 是什麼？它們到底有什麼作用呀？」別擔心，這可是許多新手都會遇到的疑問！
簡單來說，<tr> 和 <td> 是建構 HTML 表格（Table）最基礎、也是最重要的兩個元素。
<tr> 代表的是表格的「列」（Table Row），而 <td> 則代表的是列中的「儲存格」（Table Data）。
想像一下，一個傳統的表格，是不是由一條一條的橫線（列）組成，而每個橫線裡頭又分成一個一個的小方塊（儲存格）？
<tr> 和 <td> 就是在網頁上實現這個概念的關鍵。
今天，我們就要好好來聊聊，<tr> 和 <td> 究竟是怎麼一回事，還有它們在網頁設計中的實際應用，讓你一次搞懂！

HTML 表格結構：建立網頁的視覺骨架

在深入探討 <tr> 和 <td> 之前，我們先來了解一下 HTML 表格的整體結構。
一個完整的 HTML 表格，通常會包含以下幾個主要的標籤：

  • <table>：這是最外層的標籤，包裹著整個表格的內容。它就像是一個容器，告訴瀏覽器「這裡面是一個表格喔！」
  • <thead> (可選)：用於定義表格的表頭部分。通常包含欄位的標題，可以幫助使用者快速理解表格內容。
  • <tbody> (可選)：用於定義表格的主體部分，也就是表格的主要數據內容。
  • <tfoot> (可選)：用於定義表格的表尾部分，例如總計、備註等。
  • <tr>：正如前面所說，代表表格的一列。每一個 <tr> 標籤裡頭，都會包含一個或多個 <td> 或 <th> 標籤。
  • <th> (可選)：代表表格的「表頭儲存格」（Table Header）。通常用來標示欄位或列的標題，瀏覽器會預設將其文字加粗並置中顯示，提供更佳的可讀性。
  • <td>：代表表格的「資料儲存格」（Table Data）。這是放置實際數據的地方。

你可以把 <table> 想像成一個房間，<tr> 就像是房間裡的沙發排（一列一列的），而 <td> 則是每個沙發座位（一個一個的儲存格）。
而 <th> 則是可以想像成沙發旁邊的小茶几，上面放著這個沙發列（欄位）的名稱。

<tr>：表格中的「列」

<tr> 這個標籤，顧名思義，就是「Table Row」的縮寫。它的主要任務，就是定義表格中的一「列」。
無論你想要在表格中呈現多少欄的數據，每一列的內容都必須包含在一個 <tr> 標籤之中。
所以，當你看到一個表格有 5 列資料，那表示程式碼中就會有 5 個 <tr> 標籤。
是不是聽起來很直覺呢？

舉個例子，一個簡單的表格，如果我們想顯示「姓名」和「年齡」這兩欄，並且有兩位朋友的資料，那麼程式碼可能就會是這樣： 

<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>25</td>
  </tr>
  <tr>
    <td>小華</td>
    <td>30</td>
  </tr>
</table>

在這個例子中，我們可以看到：

  • 第一個 <tr> 包含了兩個 <th>，用來標示「姓名」和「年齡」這兩個欄位的標題。
  • 第二個 <tr> 包含了兩個 <td>，分別是「小明」和「25」，這是一列的數據。
  • 第三個 <tr> 同樣包含了兩個 <td>，分別是「小華」和「30」，這是另一列的數據。

你會發現，<tr> 標籤裡面的內容，決定了這一列要顯示幾個「欄位」的數據。

<td>：表格中的「儲存格」

接下來，我們來看看 <td>。這個標籤代表的是「Table Data」，也就是表格中的「資料儲存格」。
在每一個 <tr> 標籤裡面，你可以放入任意數量的 <td> 標籤，用來放置實際的數據。
每個 <td> 標籤裡的內容，就是該列、該欄的具體資訊。

前面例子中的 <td>，例如 <td>小明</td>，就代表在第一列（小明的列）的第一欄（姓名欄）的資料是「小明」。
而 <td>25</td> 則代表在第一列（小明的列）的第二欄（年齡欄）的資料是「25」。

一個重要原則： 在同一個 <tr> 裡面的 <td> (或 <th>) 數量，應該要跟表格的其他列的 <td> (或 <th>) 數量一致。
如果某一行有 3 個儲存格，其他行也最好有 3 個儲存格，這樣表格才會對齊，看起來才會漂亮，對吧？
當然，HTML 允許不對齊，但視覺上就會怪怪的，而且可能影響數據的正確呈現。

小提醒： 雖然 <td> 主要用來放數據，但你也可以在裡面放任何其他 HTML 元素，像是圖片 <img>、連結 <a>、段落 <p> 甚至是另一個表格！這就讓表格的功能變得非常強大。

<th> vs <td>：何時該用哪個？

我們前面提到了 <th>，它和 <td> 雖然都是儲存格，但用途不太一樣。
<th> 的意思是「Table Header」，也就是表頭儲存格。它用來標示欄位或列的標題。
通常，我們會在表格的第一列（或者第一欄，取決於表格的設計方向）使用 <th> 來定義標題。
使用 <th> 的好處是：

  • 語意化： 它明確告訴瀏覽器和搜尋引擎，這是一個標題，而不是一般數據。這對 SEO 和無障礙網頁（Accessibility）非常重要。
  • 樣式呈現： 瀏覽器預設會將 <th> 的文字加粗並置中，讓使用者一眼就能區分標題和內容。
  • 輔助閱讀： 對於視覺障礙的使用者，螢幕閱讀器（Screen Reader）可以藉由 <th> 辨識出欄位名稱，更有效地理解表格內容。

簡單來說：

  • 如果這個儲存格的內容是「欄位名稱」或「標題」，請用 <th>。
  • 如果這個儲存格的內容是「實際數據」，請用 <td>。

當然，你也可以透過 CSS 來改變 <th> 和 <td> 的樣式，讓它們看起來一模一樣，但從語意化和網頁結構的角度來看，正確使用 <th> 和 <td> 是非常重要的。

<tr> 和 <td> 的進階應用與屬性

除了基本的結構，<tr> 和 <td> 還有一些屬性可以讓表格更加靈活：

colspan 和 rowspan：合併儲存格的藝術

有時候，我們需要將多個儲存格合併成一個，來達到更複雜的版面需求。這時候 colspan 和 rowspan 屬性就派上用場啦！

  • colspan：用於 <td> 或 <th> 標籤，指定該儲存格要合併多少「欄」。例如，colspan="2" 就表示這個儲存格要佔據兩個欄位的寬度。
  • rowspan：用於 <td> 或 <th> 標籤，指定該儲存格要合併多少「列」。例如，rowspan="3" 就表示這個儲存格要佔據三列的高度。

舉個例子，假設我們要設計一個有「日期」、「星期」和「天氣」的表格，但「天氣」欄位有時需要特別說明，可能會合併兩格。 

<table border="1">
  <tr>
    <th>日期</th>
    <th>星期</th>
    <th colspan="2">天氣狀況</th> <!-- 天氣狀況合併兩個欄位 -->
  </tr>
  <tr>
    <td>2026-10-26</td>
    <td>星期四</td>
    <td>晴</td>
    <td>小知識</td> <!-- 這是天氣狀況下的額外說明，不與上方的「晴」合併 -->
  </tr>
  <tr>
    <td>2026-10-27</td>
    <td>星期五</td>
    <td colspan="2">陰時多雲偶陣雨</td> <!-- 這裡天氣狀況只用一個儲存格，但佔兩個欄位寬 -->
  </tr>
  <tr>
    <td rowspan="2">2026-10-28</td> <!-- 日期佔據兩列 -->
    <td>星期六</td>
    <td>陣雨</td>
    <td>攜帶雨具</td>
  </tr>
  <tr>
    <td>星期日</td>
    <td colspan="2">晴朗，紫外線強</td> <!-- 這裡天氣狀況合併兩個欄位 -->
  </tr>
</table>

在這個例子裡，第一列的 <th colspan="2">天氣狀況</th> 讓「天氣狀況」這個標題橫跨了原本兩個欄位的位置。
而最後一列的 <td rowspan="2">2026-10-28</td> 則讓「2026-10-28」這個日期佔據了原本應該是兩列的空間。
運用 colspan 和 rowspan，我們可以創造出更複雜、也更有彈性的表格佈局，這在報表、資訊呈現上非常實用！

scope 屬性：強化表頭與數據的關聯

scope 屬性主要用於 <th> 標籤，用來明確指定該表頭儲存格是屬於哪一欄（scope="col"）還是哪一列（scope="row"）。
如果表格結構比較複雜，或是需要特別強調表頭與數據的對應關係（例如，讓螢幕閱讀器更精準地讀出內容），就可以使用 scope 屬性。 

<table border="1">
  <tr>
    <th scope="col">產品名稱</th>
    <th scope="col">價格</th>
  </tr>
  <tr>
    <th scope="row">筆記型電腦</th> <lt;!-- 這裡我們也可以把產品名稱視為列的標題 -->
    <td>35000</td>
  </tr>
  <tr>
    <th scope="row">智慧型手機</th>
    <td>18000</td>
  </tr>
</table>

在這個例子中，我們同時使用了 scope="col" 和 scope="row"。
第一列的 <th scope="col"> 告訴瀏覽器，這是「欄」的標題。
而第二、三列的 <th scope="row"> 則告訴瀏覽器，這是「列」的標題。
這樣一來，螢幕閱讀器就能更清楚地知道，「筆記型電腦」是屬於哪一列的標題，而「價格」是屬於哪一欄的標題，從而更好地輔助使用者理解表格內容。

為什麼要用 HTML 表格？

你可能會問，現在有很多 CSS 框架和 Flexbox、Grid 等佈局方式，為什麼我還需要學習 <tr> 和 <td> 呢？
這是一個很棒的問題！
我的看法是，HTML 表格（也就是 <tr> 和 <td>）最重要的價值，依然在於「**語意化地呈現表格化數據**」。

切記： HTML 表格是用來呈現「表格化數據」的，而不是用來排版的！
以前的網頁開發，有些人會濫用表格來做頁面佈局，把整個網頁塞在一個大表格裡。這是非常不推薦的做法，因為這會讓程式碼變得難以閱讀、維護，而且對 SEO 和網站效能都有負面影響。

那麼，在什麼情況下，我們「應該」使用 HTML 表格呢？

  • 數據對照： 當你需要呈現多個項目之間的比較，例如產品規格比較表、價目表、選手成績記錄、歷史數據比較等。
  • 統計報表： 顯示各種統計數據、報告，例如銷售數據、財務報表、人口統計資料等。
  • 複雜資訊矩陣： 當數據的關聯性比較複雜，需要明確呈現多個維度的資訊時。

雖然 CSS 佈局工具很強大，可以做出各種視覺效果，但它們主要用於「頁面佈局」，而不是「數據結構」。
如果你要呈現的是一堆沒有明確對應關係的文字或圖片，那麼 Flexbox 或 Grid 會是更好的選擇。
但如果你有一系列的項目，每個項目都有相同的屬性（例如：姓名、電話、email），那麼使用 <table>、<tr> 和 <td> 是最能表達其結構和意義的方式。

而且，一旦你將數據用正確的 HTML 表格結構呈現，即使不套用任何 CSS 樣式，它本身就具備了良好的語意和結構，這對於搜尋引擎的爬取（SEO）和輔助技術（如螢幕閱讀器）來說，是非常重要的加分項。
我個人經驗覺得，許多時候，使用表格來展示數據，比用一大堆 <div> 加上複雜的 CSS 來模擬表格，來得更直觀、更有效率，也更能保持網頁的結構清晰。

常見問題解答 (FAQ)

Q1: <tr> 和 <td> 裡頭一定要有內容嗎？

不一定喔！<tr> 和 <td> 標籤本身可以為空。
舉例來說，你可以有一個空的 <td></td>，它會顯示為一個空白的儲存格。
有時候，我們可能會刻意留下空的 <td> 來保持表格的對齊，或者作為佔位符。
不過，要注意的是，如果 <tr> 裡面完全沒有 <td> 或 <th>，那這一列就不會顯示任何內容。

Q2: 我可以用 CSS 來隱藏 <tr> 或 <td> 嗎？

當然可以！CSS 是用來控制網頁樣式的，你可以透過 CSS 來控制表格列或儲存格的顯示與否。
例如，使用 display: none; 可以完全移除該列或儲存格，讓它不佔用任何空間。
使用 visibility: hidden; 則會讓它隱藏，但仍然佔據空間。
這在某些情況下很有用，例如你希望在不同裝置上顯示不同數量的欄位，就可以透過 CSS 媒體查詢（Media Queries）來控制。

Q3: <tr> 和 <td> 的順序有影響嗎？

是的，順序很重要！
在一個 <table> 標籤內，<tr> 標籤的順序決定了表格列的先後順序。
在一個 <tr> 標籤內，<td> (或 <th>) 標籤的順序，則決定了該列數據的欄位順序。
所以，如果你想讓「姓名」顯示在第一欄，「年齡」顯示在第二欄，那麼你的 <tr> 裡面的 <td> 就必須是 <td>姓名</td><td>年齡</td>。
如果顛倒過來，就會顯示成「年齡」在第一欄，「姓名」在第二欄。

Q4: 為什麼我的表格沒有邊框？

HTML 表格預設是沒有邊框的。要讓表格顯示邊框，你需要使用 CSS 來設定。
你可以為 <table>、<tr>、<td> 或 <th> 加上 border 屬性。
最常見的做法是為 <table> 設定一個邊框，然後將 border-collapse: collapse; 的 CSS 屬性加到 <table> 上，這樣可以讓儲存格之間的邊框合併，看起來更整齊。

例如，在 HTML 中加入 border="1" 屬性（這是一個舊的 HTML 屬性，現在建議用 CSS 處理，但為了快速展示，有時也會這樣用），或者更推薦的做法是： 

<style>
table {
  border-collapse: collapse; /* 合併邊框 */
  width: 50%; /* 設定表格寬度 */
}
th, td {
  border: 1px solid black; /* 設定儲存格邊框 */
  padding: 8px; /* 設定儲存格內距 */
  text-align: left; /* 設定文字對齊方式 */
}
th {
  background-color: #f2f2f2; /* 設定表頭背景色 */
}
</style>

<table>
  <tr>
    <th>標題一</th>
    <th>標題二</th>
  </tr>
  <tr>
    <td>數據一</td>
    <td>數據二</td>
  </tr>
</table>

使用 CSS 來控制表格的樣式，會讓你的網頁結構更清晰，也更容易進行統一的樣式管理。

Q5: <tr> 和 <td> 可以互相替換嗎？

不行，絕對不行！<tr> 和 <td> 分別代表表格的「列」和「儲存格」，它們的功能和語意是完全不同的，不能互相替換。
如果你在 <tr> 裡放入了 <tr>，或者在 <td> 裡放入了 <td>（除非是巢狀表格），這都是不正確的 HTML 結構，會導致瀏覽器難以解析，最終呈現的效果可能就會出乎意料。
請務必記得，<tr> 是「列」，<td> 是「列中的儲存格」。

總結

希望透過這篇文章，你對「tr td 是什麼」這個問題已經有了非常清晰的認識！
<tr> 是表格的列，<td> 是列中的資料儲存格，而 <th> 則是表頭儲存格。
它們是建構 HTML 表格不可或缺的基石。
正確且有語意地使用這些標籤，不僅能幫助你創建結構清晰、易於理解的網頁內容，也能提升網頁的 SEO 表現和無障礙性。
下次在設計網頁時，如果需要呈現表格化的數據，請記得運用 <tr> 和 <td>，讓你的網頁內容更加豐富和專業！

tr td是什麼