تگ caption در HTML

  /  فرانت اند   /  HTML   /  تگ caption در HTML

با استفاده از تگ caption در HTML میتوان برای عنصر table یک عنوان یا توضیحی کوتاه تعریف کرد.

مثال

<table>
<caption>سن افراد</caption>
<tr>
<th>نام و نام خانوادگی</th>
<th>سن</th>
</tr>
<tr>
<td>متین برونسی</td>
<td>20</td>
</tr>
<tr>
<td>علی حیدری</td>
<td>13</td>
</tr>
</table>


تعریف و کاربرد

با استفاده از تگ caption در HTML برای یک جدول عنوان یا توضیحات تعریف می کنیم.

تگ <caption> باید بلافاصله بعد از تگ <table> تعریف شود.

به طور پیش فرض متن درون تگ <caption> در وسط جدول قرار دارد ، که البته می توانید با استفاده از CSS ، خواص text-align یا caption-side موقعیت مکانی <cpation> را در جدول را تغییر دهید.


پشتیبانی مرورگر ها

عنصر
<caption>بلهبلهبلهبلهبله

خواص عمومی

تگ caption از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ caption از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر caption در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

caption {
  display: table-caption;
  text-align: center;
}

مثال های بیشتر

موقعیت مکانی <caption> در جدول با CSS:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<caption style="text-align:right">سن افراد</caption>
<tr>
<th>نام</th>
<th>سن</th>
</tr>
<tr>
<td>متین</td>
<td>20</td>
</tr>
</table>
<br>

<table>
<caption style="caption-side:bottom">سن افراد</caption>
<tr>
<th>نام</th>
<th>سن</th>
</tr>
<tr>
<td>متین</td>
<td>20</td>
</tr>
</table>

</body>
</html>

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر