العنصر <caption>

من موسوعة حسوب

يُمثِّل العنصر <caption> عنوان الجدول، وعلى الرغم من أنَّه يجب أن يكون أوّل ابن للعنصر <table> لكن يمكن باستخدام CSS وضعه في أي مكان نسبةً إلى الجدول.

مثال عن استخدام العنصر <caption> لإضافة عنوان لجدول <table>:

<table>
  <caption>عنوان الجدول</caption>
  <tr>
    <td>البيانات الموجودة فيه</td>
  </tr>
</table>

بطاقة العنصر

تصنيفات المحتوى لا يوجد.
المحتوى المسموح المحتوى التنظيمي.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب العنصر <table>، ويجب أن يكون هذا العنصر أوّل ابن له.
واجهة DOM HTMLTableCaptionElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

align

تُستخدم هذه الخاصية لتحديد كيف تكون محاذاة العنوان (caption) بالنسبة إلى الجدول، وتقبل إحدى القيم الآتية:

  • left: عرض العنوان على يسار الجدول
  • top: عرض العنوان أعلى الجدول
  • right: عرض العنوان على يمين الجدول
  • bottom: عرض العنوان أسفل الجدول

يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <caption> باستخدام CSS، وذلك باستخدام الخاصيتين caption-side و text-align.

ملاحظات الاستخدام

عندما يكون العنصر <table> الذي يُستعمل فيه هذا العنصر الابن الوحيد للعنصر <figure> فيجب حينئذٍ استخدام العنصر <figcaption> بدلًا من <caption>.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <caption> مع ضبط الخاصية display إلى table-caption والخاصية text-align إلى center:

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

مصادر ومواصفات