50 کامل شده تا

برچسب <caption> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< مرجع HTML:تگ‌ها(تغییرمسیر از تگ caption)
پرش به ناوبری پرش به جستجو
عنوان جدول را تعریف می‌کند
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:به پائین مراجعه کنید


{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

یک جدول با یک کپشن (عنوان):

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

مثال‌های بیشتری از «مشاهدهٔ نتیجه» در زیر.

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

برچسب <caption>، کپشن (عنوان) یک جدول را تعریف می‌کند.[۱]

برچسب <caption> باید بلافاصله بعد از برچسب <table> درج شود.

نکته: شما فقط می‌توانید یک کپشن به ازای هر جدول مشخص کنید.

نکته: بصورت پیش‌فرض یک کپشن جدول، در بالای جدول در وسط صفحه تراز می‌شود. هرچند، از ویژگی‌های تراز متن (text-align) و سمت کپشن (caption-side) در CSS می‌توان برای تراز کردن و قرار دادن کپشن استفاده کرد.

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

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<caption> بله بله بله بله بله

ویژگی های سراسری (Global Attributes)

همچنین برچسب <caption> از ویژگی‌های سراسری در اچ‌تی‌ام‌ال (Global Attributes in HTML) پشتیبانی می‌کند.

ویژگی های رویداد (Event Attributes)

همچنین برچسب <caption> از ویژگی‌های رویداد در اچ‌تی‌ام‌ال (Event Attributes in HTML) پشتیبانی می‌کند.

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

مثال

کپشن جدول را قراردهی کنید (با CSS):

<table>
  <caption style="text-align:right">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<br>

<table>
  <caption style="caption-side:bottom">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


صفحات مرتبط

مرجع DOM اچ‌تی‌ام‌ال: شیء کپشن (Caption Object)

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

بیشتر مرورگرها عنصر <caption> را با مقادیر پیش‌فرض زیر نمایش می‌دهند:

مثال

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


منابع آموزشی