الخاصية caption-side

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

الخاصية caption-side في CSS تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر <caption>.

بطاقة الخاصية

القيمة الابتدائية top
تُطبَّق على العنصر <caption>.
قابلة للوراثة نعم
قابلة للحركة لا
القيمة المحسوبة كما حُدِّدَت.
/* كلمات محجوزة */ 
caption-side: top; 
caption-side: bottom; 

/* القيم العامة */ 
caption-side: inherit; 
caption-side: initial; 
caption-side: unset;

أمثلة

سنستخدم في المثال الآتي جدولين <table> مع لافتةٍ <caption> لكل واحدٍ منهما، ثم سنستعمل الخاصية caption-side لضبط موضع اللافتة:

<table class="top">
  <caption>اللافتة فوق الجدول</caption>
  <tr>
    <td>بعض البيانات</td>
    <td>بعض البيانات الأخرى</td>
  </tr>
</table>

<br>

<table class="bottom">
  <caption>اللافتة تحت الجدول</caption>
  <tr>
    <td>بعض البيانات</td>
    <td>بعض البيانات الأخرى</td>
  </tr>
</table>

شيفرة CSS:

.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid gray;
  padding: .25em;
}

td {
  border: 1px solid cadetblue;
  padding: .1em;
}

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 8.0 4.0 1.0

البنية العامة

الخاصية caption-side تقبل إحدى الكلمتين المحجوزتين التاليتين.

top

يجب عرض لافتة الجدول <caption> فوق الجدول.

bottom

يجب عرض لافتة الجدول <caption> تحت الجدول.

البنية الرسمية

caption-side: top | bottom;

 انظر أيضًا

  • صفحة الخاصية top التي تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها.
  • صفحة الخاصية bottom التي تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها.

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