HTML <caption> Tag

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

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

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

نصيحة:بالتجربة، سيكون عنوان الجدول في منتصف الجدول. ولكن يمكن استخدام خصائص CSS text-align و caption-side لتعديل التوجيه ووضع العنوان.

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

دليل HTML DOM:مفهوم التسمية

مثال

مثال 1

جدول يحتوي على عنوان:

<table>
  <caption>إيداعات الشهرية</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3000</td>
  </tr>
</table>

Try it yourself

مثال 2

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

<table>
  <caption style="text-align:right">أغانيي المحفظة</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3000</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>￥3000</td>
  </tr>
</table>

Try it yourself

Global attributes

<caption> The tag also supports Global attributes in HTML.

event attributes

<caption> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <caption> Element:

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

Try it yourself

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support