علامة <caption> في HTML

تعريف والاستخدام

<caption> تعريف العلامة الجدولية

يجب أن يتبع علامة caption علامة table. لا يمكنك تعريف عنوان لكل جدول.

إشارة:بافتراض، سيتم ضبط عنوان الجدول في منتصف الجدول أعلى. ولكن يمكن استخدام خصائص CSS text-align و caption-side لتعديل التزيين ووضع العنوان.

يرجى الرجوع أيضًا إلى:

دليل DOM HTML:مفهوم Caption

مثال

مثال 1

جداول مع عناوين:

<table>
  <caption>مخزون الشهر</caption>
  <tr>
    <th>الشهر</th>
    <th>إيداع</th>
  </tr>
  <tr>
    <td>شهر</td>
    <td>￥3000</td>
  </tr>
</table>

تجربة شخصية

مثال 2

عنوان جدول التوضيح (باستخدام CSS):

<table>
  <caption style="text-align:right">مخزوني</caption>
  <tr>
    <th>الشهر</th>
    <th>إيداع</th>
  </tr>
  <tr>
    <td>شهر</td>
    <td>￥3000</td>
  </tr>
</table>
<br>
<table>
  <caption style="caption-side:bottom">إيداعاتي</caption>
  <tr>
    <th>الشهر</th>
    <th>إيداع</th>
  </tr>
  <tr>
    <td>شهر</td>
    <td>￥3000</td>
  </tr>
</table>

تجربة شخصية

خصائص العالمية

<caption> يدعم العلامة خصائص العالمية في HTML.

خصائص الحدث

<caption> يدعم العلامة خصائص الحدث في HTML.

إعدادات CSS الافتراضية

معظم المتصفحات ستعمل باستخدام القيم الافتراضية التالية لعرضها <caption> العنصر:

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

تجربة شخصية

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم