給表格加標(biāo)題，HTML 裡用<caption></caption>最直接。這個標(biāo)籤專門用來給表格加上一個說明性文字，通常會顯示在表格的頂部，當(dāng)然也可以通過CSS 控制位置。

<caption></caption>是什麼？

簡單說， <caption></caption>就是表格的標(biāo)題標(biāo)籤。它必須放在<table>標(biāo)籤內(nèi)部，而且一般寫在<code><thead>前面。瀏覽器默認(rèn)會把caption 的內(nèi)容居中顯示在表格上方，字體也會稍微小一點。<p>比如： </p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175381200694104.jpeg" class="lazy" alt="HTML `caption` for Table Titles"><pre class='brush:php;toolbar:false;'> &lt;table&gt; &lt;caption&gt;月度銷售數(shù)據(jù)&lt;/caption&gt; &lt;thead&gt; &lt;tr&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;10000&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</pre><p>這樣，頁面上就會顯示一個帶標(biāo)題“月度銷售數(shù)據(jù)”的表格。</p><h3 id="為什麼應(yīng)該用-code-caption-code">為什麼應(yīng)該用<code><caption> ？

不用caption 的話，很多人會用額外的<tr>或者單獨的<div> 、 <h3 id="code-來放標(biāo)題-但這些做法對語義和可訪問性都不太友好-p-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-article-jpeg-class-lazy-alt-HTML-caption-for-Table-Titles-ul-li-strong-語義清晰-strong-屏幕閱讀器能識別-code-caption-code-知道這是表格的標(biāo)題-li-li-strong-結(jié)構(gòu)規(guī)範(fàn)-strong-有助於維護HTML-結(jié)構(gòu)的一致性-li-li-strong-樣式可控-strong-可以通過CSS-自定義樣式-不影響文檔流-li-ul-p-所以如果你要加表格標(biāo)題-優(yōu)先考慮-code-caption-code-別自己造輪子-p-h-怎麼美化-code-caption-code">來放標(biāo)題。但這些做法對語義和可訪問性都不太友好。

• 語義清晰：屏幕閱讀器能識別<caption> ，知道這是表格的標(biāo)題。
• 結(jié)構(gòu)規(guī)範(fàn)：有助於維護HTML 結(jié)構(gòu)的一致性。
• 樣式可控：可以通過CSS 自定義樣式，不影響文檔流。

所以如果你要加表格標(biāo)題，優(yōu)先考慮<caption> ，別自己造輪子。

怎麼美化<caption> ？

雖然瀏覽器默認(rèn)樣式比較樸素，但你可以用CSS 改變它的外觀，比如字體大小、顏色、對齊方式等。

 caption {
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
  padding-bottom: 8px;
}

上面這段樣式會讓caption 左對齊，並且字體更大更粗，看起來更像正式的標(biāo)題。

另外，你還可以控制它顯示在表格下方：

 caption {
  caption-side: bottom;
}

不過要注意的是，把標(biāo)題放下面可能會影響用戶體驗，特別是當(dāng)表格很長的時候。

常見註意事項

使用<caption></caption>雖然簡單，但也有些細節(jié)容易忽略：

• 一個表格只能有一個<caption></caption> 。
• 不要把<caption></caption>和<th>混淆，後者是表頭單元格。<li>如果你不希望標(biāo)題被用戶看到，但又要保留給屏幕閱讀器，可以用隱藏技巧，比如<code>position: absolute; left: -9999px; 。
• 不建議嵌套複雜結(jié)構(gòu)到<caption></caption>中，保持簡潔為主。

---

基本上就這些。用好<caption></caption> ，不僅能讓表格結(jié)構(gòu)更清晰，也能提升網(wǎng)頁的可訪問性和語義表達能力。