<caption>：表格標題元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<caption> HTML 元素用於指定表格的標題或標題，為表格提供了一個無障礙描述。

嘗試一下

<table>
  <caption>
    He-Man and Skeletor facts
  </caption>
  <tr>
    <td></td>
    <th scope="col" class="heman">He-Man</th>
    <th scope="col" class="skeletor">Skeletor</th>
  </tr>
  <tr>
    <th scope="row">Role</th>
    <td>Hero</td>
    <td>Villain</td>
  </tr>
  <tr>
    <th scope="row">Weapon</th>
    <td>Power Sword</td>
    <td>Havoc Staff</td>
  </tr>
  <tr>
    <th scope="row">Dark secret</th>
    <td>Expert florist</td>
    <td>Cries at romcoms</td>
  </tr>
</table>

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250 250 250);
}

tr:nth-child(odd) td {
  background-color: rgb(240 240 240);
}

.heman {
  font: 1.4rem molot;
  text-shadow:
    1px 1px 1px #fff,
    2px 2px 1px #000;
}

.skeletor {
  font: 1.7rem rapscallion;
  letter-spacing: 3px;
  text-shadow:
    1px 1px 0 #fff,
    0 0 9px #000;
}

屬性

此元素包含全域屬性。

廢棄的屬性

以下屬性已被廢棄，不應使用。它們僅作為更新現有代碼和歷史興趣的參考而記錄如下。

align

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

使用注意事項

  • 如果包含，則 <caption> 元素必須是其父 <table> 元素的第一個子元素。
  • 當 <table> 嵌套在一個 <figure> 中並成為該 <figure> 的唯一內容時，應該通過 <figcaption> 而不是 <caption> 嵌套在 <table> 內部為 <figure> 添加標題。
  • 對表格應用的任何 background-color 將不會應用於其標題。如果希望相同的顏色出現在標題背後，也應該將 background-color 添加到 <caption> 元素中。

範例

查看 <table> 以獲取引入常見標準和最佳實踐的完整表格範例。

此範例演示了包含描述所呈現數據的標題的基本表格。

這種「標題」對於快速掃描頁面的用戶非常有幫助，對於視覺受損的用戶尤其有益，它允許他們快速確定表格的相關性，而無需讓屏幕閱讀器閱讀許多單元格的內容來找出表格的內容是關於什麼的。

HTML

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

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

規範

Specification
HTML
# the-caption-element

瀏覽器相容性

BCD tables only load in the browser

參見