الفرق بين المراجعتين لصفحة: «CSS/caption-side»

المراجعة الحالية بتاريخ 08:19، 12 أغسطس 2018

الخاصية 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 التي تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها.

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

مسودة CSS Logical Properties Level 1.
مواصفة ‎CSS Level 2 (Revision 1)‎.

@@ سطر 36: / سطر 36: @@
 سنستخدم في المثال الآتي جدولين <code>[[HTML/table|<nowiki><table></nowiki>]]</code> مع لافتةٍ <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> لكل واحدٍ منهما، ثم سنستعمل الخاصية <code>caption-side</code> لضبط موضع اللافتة:<syntaxhighlight lang="html">
 <table class="top">
-   <caption>Caption ABOVE the table</caption>
+   <caption>اللافتة فوق الجدول</caption>
    <tr>
-     <td>Some data</td>
+     <td>بعض البيانات</td>
-     <td>Some more data</td>
+     <td>بعض البيانات الأخرى</td>
    </tr>
 </table>
@@ سطر 46: / سطر 46: @@
 <table class="bottom">
-   <caption>Caption BELOW the table</caption>
+   <caption>اللافتة تحت الجدول</caption>
    <tr>
-     <td>Some data</td>
+     <td>بعض البيانات</td>
-     <td>Some more data</td>
+     <td>بعض البيانات الأخرى</td>
    </tr>
 </table>
@@ سطر 98: / سطر 98: @@
 </syntaxhighlight>
+==  انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/top|top]]</code> التي تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها.
+* صفحة الخاصية <code>[[CSS/bottom|bottom]]</code> التي تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها.
 == مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-logical-props/#caption-side CSS Logical Properties Level 1].