HTML <caption>標(biāo)簽定義HTML文檔中表的標(biāo)題。傳統(tǒng)上,瀏覽器會(huì)渲染表格上方 <caption>標(biāo)簽中找到的文本,但是您可以使用CSS caption-side屬性更改此行為。此標(biāo)簽通常也稱為 <caption>元素。
HTML <caption> 元素 (or HTML 表格標(biāo)題元素) 展示一個(gè)表格的標(biāo)題, 它常常作為 <table> 的第一個(gè)子元素出現(xiàn),同時(shí)顯示在表格內(nèi)容的最前面,但是,它同樣可以被CSS樣式化,所以,它同樣可以出現(xiàn)在任何一個(gè)一個(gè)相對(duì)于表格的做任意位置。
帶有caption標(biāo)題的表格:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>菜鳥教程(cainiaoplus.com)</title> </head> <body> <table> <caption>This is the caption for the table</caption> <tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th> <th>Column 3 Heading</th> </tr> <tr> <td>Data in Column 1, Row 2</td> <td>Data in Column 2, Row 2</td> <td>Data in Column 3, Row 2</td> </tr> <tr> <td>Data in Column 1, Row 3</td> <td>Data in Column 2, Row 3</td> <td>Data in Column 3, Row 3</td> </tr> <tr> <td>Data in Column 1, Row 4</td> <td>Data in Column 2, Row 4</td> <td>Data in Column 3, Row 4</td> </tr> </table> </body> </html>測試看看 ?/?
IEFirefoxOperaChromeSafari
所有主流瀏覽器都支持 <caption> 標(biāo)簽。
HTML <caption>元素位于<body>標(biāo)記內(nèi)。
<caption>標(biāo)記是在<table>標(biāo)記之后出現(xiàn)的第一個(gè)標(biāo)記。
<table>標(biāo)記由<tr>,<th>和<td>標(biāo)記組成。
大多數(shù)瀏覽器將在表格上方呈現(xiàn)<caption>標(biāo)記,但是您可以使用CSS caption-side屬性更改此行為。
<caption> 標(biāo)簽定義表格的標(biāo)題。
<caption> 標(biāo)簽必須直接放置到 <table> 標(biāo)簽之后。
注意:每個(gè)表格只能指定一個(gè)標(biāo)題。
提示:默認(rèn)情況下,表格標(biāo)題將在表格上方居中對(duì)齊。但是,CSS屬性 text-align和caption-side 可用于對(duì)齊和放置標(biāo)題。
align屬性已從HTML5中刪除。
屬性 | 值 | 描述 |
---|---|---|
align | left right top bottom | HTML5 不支持。HTML 4.01 已廢棄。
定義標(biāo)題的對(duì)齊方式。 |
<caption> 標(biāo)簽支持 HTML 的全局屬性。
<caption> 標(biāo)簽支持 HTML 的事件屬性。