<caption>:表格標題元素
<caption>
HTML 元素用於指定表格的標題或標題,為表格提供了一個無障礙描述 (en-US)。
嘗試一下
屬性
此元素包含全域屬性 (en-US)。
廢棄的屬性
以下屬性已被廢棄,不應使用。它們僅作為更新現有代碼和歷史興趣的參考而記錄如下。
align
已棄用-
指定標題應顯示在表格的哪一側。可能的枚舉 (en-US)值為
left
、top
、right
或bottom
。請改用caption-side
(en-US) 和text-align
(en-US) CSS 屬性,因為此屬性已被廢棄。
使用注意事項
- 如果包含,則
<caption>
元素必須是其父<table>
元素的第一個子元素。 - 當
<table>
嵌套在一個<figure>
中並成為該<figure>
的唯一內容時,應該通過<figcaption>
而不是<caption>
嵌套在<table>
內部為<figure>
添加標題。 - 對表格應用的任何
background-color
將不會應用於其標題。如果希望相同的顏色出現在標題背後,也應該將background-color
添加到<caption>
元素中。
範例
查看 <table>
以獲取引入常見標準和最佳實踐的完整表格範例。
此範例演示了包含描述所呈現數據的標題的基本表格。
這種「標題」對於快速掃描頁面的用戶非常有幫助,對於視覺受損的用戶尤其有益,它允許他們快速確定表格的相關性,而無需讓屏幕閱讀器閱讀許多單元格的內容來找出表格的內容是關於什麼的。
HTML
<caption>
元素用作 <table>
的第一個子元素,其文本內容類似於描述表格數據的標題。在 <caption>
之後,使用 <tr>
(en-US)、<th>
(en-US) 和 <td>
(en-US) 元素創建三行,第一行是標題行,有兩列。
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 (en-US) |
允許的 ARIA 角色 | 不允許任何 role |
DOM 介面 | HTMLTableCaptionElement (en-US) |
規範
Specification |
---|
HTML Standard # the-caption-element |
瀏覽器相容性
BCD tables only load in the browser
參見
- 學習:HTML 表格
<col>
、<colgroup>
、<table>
、<tbody>
(en-US)、<td>
(en-US)、<tfoot>
(en-US)、<th>
(en-US)、<thead>
(en-US)、<tr>
(en-US):其他與表格相關的元素caption-side
(en-US):CSS 屬性,用於將<caption>
定位相對於其父元素<table>
text-align
(en-US):CSS 屬性,用於水平對齊<caption>
的文本內容