要使用 ，你需要配合

常見問題與註意事項

首頁 web前端 html教學 如何使用元素添加表標頭？

如何使用元素添加表標頭？

Karen Carpenter

Jun 23, 2025 am 12:48 AM

---

使用<thead> 是HTML 中添加表格表頭的標準做法，因為它提升語義清晰度、便於樣式和腳本控制，並支持打印時固定表頭。具體步驟包括：1. 在<table> 內(nèi)部使用<thead> 包裹表頭行；2. 使用<th> 定義表頭單元格，而非 <td>；3. 緊隨其後使用 <tbody> 包含數(shù)據(jù)行；4. 通過CSS 控製表頭樣式，如設置背景色和字體加粗。注意事項包括：確保<thead> 位於<table> 內(nèi)，一個表格通常只用一個<thead>，且現(xiàn)代瀏覽器均支持該標籤。

在HTML 中添加表格表頭時，使用<thead>元素是一個標準且推薦的做法。它不僅有助於結構清晰，也對可訪問性和樣式控制有幫助。下面是一些實用的步驟和建議，幫你正確使用<code><thead>來添加表格表頭。<hr> <h3>什麼是<code><thead> ？為什麼要用它？<p> <code><thead>是HTML 表格的一部分，專門用來包裹表格的標題行（通常是第一行）。它的主要作用是：<ul> <li>把表頭和其他內(nèi)容區(qū)分開，提高語義清晰度</li> <li>方便用CSS 或JavaScript 單獨操作表頭</li> <li>在打印長表格時可以固定顯示表頭（結合CSS）</li> </ul> <p>如果你只是寫幾個<code><tr>和<code><td> ，雖然也能顯示表格，但缺乏結構化的語義，也不利於維護和擴展。<hr> <h3 id="如何正確使用-code-thead-添加表頭-p-要使用-code-thead-你需要配合-code-table-code-tr-code-th-等標籤一起使用-基本結構如下-PRE-BLOCK-p-關鍵點-p-ul-li-code-thead-code-只應該包含表頭部分-通常是一個或多個-code-tr-code-行-li-li-表頭單元格要用-code-th-code-而不是-code-td-code-這樣瀏覽器會默認加粗並居中顯示-li-li-code-thead-code-後面一般接-code-tbody-code-用於包裹數(shù)據(jù)行-li-ul-hr-h-常見問題與註意事項">如何正確使用<code><thead>添加表頭？<p>要使用<code><thead> ，你需要配合<code><table> 、 <code><tr> 、 <code><th>等標籤一起使用。基本結構如下：<pre class='brush:php;toolbar:false;'> &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;姓名&lt;/th&gt; &lt;th&gt;年齡&lt;/th&gt; &lt;th&gt;城市&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;張三&lt;/td&gt; &lt;td&gt;28&lt;/td&gt; &lt;td&gt;北京&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;李四&lt;/td&gt; &lt;td&gt;32&lt;/td&gt; &lt;td&gt;上海&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</pre><p>關鍵點：</p><ul><li> <code><thead>只應該包含表頭部分，通常是一個或多個<tr>行

表頭單元格要用<th>而不是<td> ，這樣瀏覽器會默認加粗並居中顯示

<thead>後面一般接<tbody> ，用於包裹數(shù)據(jù)行

---

常見問題與註意事項

• 不要把<thead>放錯位置：必須放在<table>標籤內(nèi)部，不能單獨使用。
• 避免多個<thead> ：一個表格通常只需要一個表頭區(qū)域。
• 兼容性沒問題：現(xiàn)代瀏覽器都支持<thead> ，包括舊版IE（IE9 ）。
• 樣式控制技巧：你可以通過CSS 選擇器table thead tr th來統(tǒng)一設置表頭樣式，比如背景色、字體大小等。

舉個例子：

 thead th {
  background-color: #f2f2f2;
  font-weight: bold;
}

這樣可以讓表頭更醒目，增強用戶體驗。

---

基本上就這些。只要記住<thead>的用途和結構，加上一點簡單的HTML 標籤組合，就能輕鬆為你的表格添加規(guī)範的表頭。