HTML - caption 标签

HTML <caption> 标签用于指定 <table> 元素的标题。它用作表格的标题。它应该在 <table> 标签内使用。

每个表只能有一个 <caption> 元素。当表中的数据不清楚时，<caption> 元素可能很有用。在定义了表元素的标题之后，可以描述表中的数据类型。默认情况下，表格标题将始终位于表格上方的中心位置。要对齐和定位标题，您可以使用 CSS 属性 text-align 和 caption-side。

语法


<caption>
 ..... 
</caption>

属性

<caption> 标签支持 HTML 的全局属性和事件属性。一个特定属性，也在下面列出:

属性	值	描述
align	left right center justify	指定文本内容的对齐方式（已弃用）。

<caption> 标签示例

下面的示例将说明<caption> 标签的用法。在何处、何时以及如何使用<caption> 标签为表格提供标题。

表格说明

让我们考虑以下示例，我们将使用<caption>为表提供标题。


<!DOCTYPE html>
<html>
<body>
	 <style>
			table,
			td,
			th {
				 border: 4px solid #D2B4DE;
				 border-collapse: collapse;
			}
	 </style>
	 <table>
			<caption>Employee Details</caption>
			<tr>
				 <th>Name</th>
				 <th>Department</th>
				 <th>Age</th>
			</tr>
			<tr>
				 <td>Suma</td>
				 <td>IT</td>
				 <td>23</td>
			</tr>
			<tr>
				 <td>Priya</td>
				 <td>Development</td>
				 <td>26</td>
			</tr>
			<tr>
				 <td>Viswa</td>
				 <td>BPO</td>
				 <td>23</td>
			</tr>
	 </table>
</body>
</html>

表格上的<caption> 位置

考虑到我们将使用 CSS caption-side 属性的另一种情况，这决定了 caption 元素的位置。


<!DOCTYPE html>
<html>
	 <style>
	 caption {
			background: #27AE60;
			color: #F7F9F9;
			caption-side: bottom;
	 }
	 table,
	 th,
	 td {
			border: 2px solid #5DADE2;
			padding: 2px;
	 }
	 </style>
<body>
	 <table>
			<caption>qikepu</caption>
			<tr>
				 <th>Courses</th>
				 <th>Price</th>
			</tr>
			<tr>
				 <td>HTML</td>
				 <td>100</td>
			</tr>
			<tr>
				 <td>JAVA</td>
				 <td>90</td>
			</tr>
	 </table>
</body>
</html>

表格上的字幕对齐方式

在下面的示例中，我们将使用 CSS 属性使标题向左对齐。为此，我们可以使用 HTML align 属性，但最好不要使用已弃用的属性。


<!DOCTYPE html>
<html>
<body>
	 <style>
			table,
			td,
			th {
				 border: 2px solid #82E0AA;
			}
			</style>
			<table>
				 <caption style="text-align: left">
						TFI
				 </caption>
				 <tr>
						<th>Actor</th>
						<th>Movie</th>
						<th>Age</th>
				 </tr>
				 <tr>
						<td>Pavankalyan</td>
						<td>Jalsa</td>
						<td>25</td>
				 </tr>
				 <tr>
						<td>Ram</td>
						<td>Hyper</td>
						<td>28</td>
				 </tr>
				 <tr>
						<td>Arjun</td>
						<td>Bunny</td>
						<td>26</td>
				 </tr>
			</table>
</body>
</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

打印本页