<caption>：表格標題元素

基線 廣泛可用

此功能已完善，可在許多裝置和瀏覽器版本上執行。它自以下時間起在瀏覽器中可用 2015 年 7 月.

<caption> HTML 元素指定表格的標題（或名稱），為表格提供 可訪問的描述。

試試看

屬性

此元素包括 全域性屬性。

已棄用的屬性

以下屬性已棄用，不應使用。在更新現有程式碼和出於歷史興趣時，將在下面記錄這些屬性以供參考。

align

指定標題在表格的哪一側顯示。可能的列舉值為left、top、right或bottom。請改用caption-side和text-align CSS 屬性，因為此屬性已棄用。

使用說明

  • 如果包含，則<caption>元素必須是其父<table>元素的第一個子元素。
  • 當一個<table>巢狀在<figure>中作為圖形的唯一內容時，應透過<figcaption>為<figure>新增標題，而不是作為巢狀在<table>中的<caption>。
  • 應用於表格的任何background-color都不會應用於其標題。如果您希望相同顏色出現在兩者後面，請也為<caption>元素新增background-color。

示例

有關完整的表格示例，介紹常見標準和最佳實踐，請參閱<table>。

帶標題的表格

此示例演示了一個包含描述所呈現資料的標題的基本表格。

這樣的“標題”對於快速掃描頁面內容的使用者很有幫助，對於視障使用者尤其有益，使他們能夠快速確定表格的相關性，而無需螢幕閱讀器讀取許多單元格的內容才能瞭解表格的主題。

HTML

<caption>元素用作<table>的第一個子元素，其文字內容類似於標題，用於描述表格資料。使用<tr>、<th>和<td>元素在<caption>之後建立三行，第一行是標題行，有兩列。

html
<table>
  <caption>
    User login email addresses
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@example.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@example.com</td>
  </tr>
</table>

CSS

一些基本的 CSS 用於對齊和突出顯示<caption>。

css
caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: bold;
}

結果

技術摘要

內容類別 無。
允許的內容 流內容.
標籤省略 如果元素後面沒有緊跟 ASCII 空格或註釋，則可以省略結束標籤。
允許的父元素 一個<table>元素，作為其第一個後代。
隱式 ARIA 角色 caption
允許的 ARIA 角色 不允許使用role。
DOM 介面 HTMLTableCaptionElement

規範

規範
HTML 標準
# the-caption-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱