要使用 ，你需要配合

常見問題與註意事項(xiàng)

首頁 web前端 html教學(xué) 如何使用元素添加表標(biāo)頭？

如何使用元素添加表標(biāo)頭？

Karen Carpenter

Jun 23, 2025 am 12:48 AM

---

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

在HTML 中添加表格表頭時(shí)，使用<thead>元素是一個(gè)標(biāo)準(zhǔn)且推薦的做法。它不僅有助於結(jié)構(gòu)清晰，也對可訪問性和樣式控制有幫助。下面是一些實(shí)用的步驟和建議，幫你正確使用<code><thead>來添加表格表頭。<hr> <h3>什麼是<code><thead> ？為什麼要用它？<p> <code><thead>是HTML 表格的一部分，專門用來包裹表格的標(biāo)題行（通常是第一行）。它的主要作用是：<ul> <li>把表頭和其他內(nèi)容區(qū)分開，提高語義清晰度</li> <li>方便用CSS 或JavaScript 單獨(dú)操作表頭</li> <li>在打印長表格時(shí)可以固定顯示表頭（結(jié)合CSS）</li> </ul> <p>如果你只是寫幾個(gè)<code><tr>和<code><td> ，雖然也能顯示表格，但缺乏結(jié)構(gòu)化的語義，也不利於維護(hù)和擴(kuò)展。<hr> <h3 id="如何正確使用-code-thead-添加表頭-p-要使用-code-thead-你需要配合-code-table-code-tr-code-th-等標(biāo)籤一起使用-基本結(jié)構(gòu)如下-PRE-BLOCK-p-關(guān)鍵點(diǎn)-p-ul-li-code-thead-code-只應(yīng)該包含表頭部分-通常是一個(gè)或多個(gè)-code-tr-code-行-li-li-表頭單元格要用-code-th-code-而不是-code-td-code-這樣瀏覽器會默認(rèn)加粗並居中顯示-li-li-code-thead-code-後面一般接-code-tbody-code-用於包裹數(shù)據(jù)行-li-ul-hr-h-常見問題與註意事項(xiàng)">如何正確使用<code><thead>添加表頭？<p>要使用<code><thead> ，你需要配合<code><table> 、 <code><tr> 、 <code><th>等標(biāo)籤一起使用?；窘Y(jié)構(gòu)如下：<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>關(guān)鍵點(diǎn)：</p><ul><li> <code><thead>只應(yīng)該包含表頭部分，通常是一個(gè)或多個(gè)<tr>行

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

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

---

常見問題與註意事項(xiàng)

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

舉個(gè)例子：

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

這樣可以讓表頭更醒目，增強(qiáng)用戶體驗(yàn)。

---

基本上就這些。只要記住<thead>的用途和結(jié)構(gòu)，加上一點(diǎn)簡單的HTML 標(biāo)籤組合，就能輕鬆為你的表格添加規(guī)範(fàn)的表頭。