الفرق بين المراجعتين ل"HTML/caption"

المراجعة الحالية بتاريخ 04:47، 24 فبراير 2018

يُمثِّل العنصر <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;
}

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

معيار HTML Living Standard.
مواصفة HTML5.
مواصفة HTML 4.01.

@@ سطر 4: / سطر 4: @@
 مثال عن استخدام العنصر <code><nowiki><caption></nowiki></code> لإضافة عنوان لجدول <code>[[HTML/table|<nowiki><table></nowiki>]]</code>:<syntaxhighlight lang="html">
 <table>
-   <caption>Awesome caption</caption>
+   <caption>عنوان الجدول</caption>
    <tr>
-     <td>Awesome data</td>
+     <td>البيانات الموجودة فيه</td>
    </tr>
 </table>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 51: / سطر 52: @@
 * <code>right</code>: عرض العنوان على يمين الجدول
 * <code>bottom</code>: عرض العنوان أسفل الجدول
-يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code><nowiki><caption></nowiki></code> باستخدام CSS، وذلك باستخدام الخاصيتين <code>caption-side</code> و <code>text-align</code>.
+يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code><nowiki><caption></nowiki></code> باستخدام CSS، وذلك باستخدام الخاصيتين <code>[[CSS/caption-side|caption-side]]</code> و <code>[[CSS/text-align|text-align]]</code>.
 == ملاحظات الاستخدام ==
 عندما يكون العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code> الذي يُستعمل فيه هذا العنصر الابن الوحيد للعنصر <code>[[HTML/figure|<figure>]]</code> فيجب حينئذٍ استخدام العنصر <code>[[HTML/figcaption|<figcaption>]]</code> بدلًا من <code><nowiki><caption></nowiki></code>.
+== التنسيق الافتراضي ==
+تعرض أغلبية المتصفحات العنصر <code><nowiki><caption></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>table-caption</code> والخاصية <code>[[CSS/text-align|text-align]]</code> إلى <code>center</code>:<syntaxhighlight lang="css">
+caption {
+  display: table-caption;
+  text-align: center;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==