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

مراجعة 08:25، 29 يوليو 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 ABOVE the table</caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>

<br>

<table class="bottom">
  <caption>Caption BELOW the table</caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</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;

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>caption-side</code>}}</noinclude>
-الخاصية <code>caption-side</code> في CSS تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>.<syntaxhighlight lang="css">
+الخاصية <code>caption-side</code> في CSS تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>.
-/* كلمات محجوزة */
-caption-side: top;
-caption-side: bottom;
-/* القيم العامة */
+== بطاقة الخاصية ==
-caption-side: inherit;
-caption-side: initial;
-caption-side: unset;
-</syntaxhighlight>
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 28: / سطر 21: @@
 |}
+<syntaxhighlight lang="css">
+/* كلمات محجوزة */
+caption-side: top;
+caption-side: bottom;
+/* القيم العامة */
+caption-side: inherit;
+caption-side: initial;
+caption-side: unset;
+</syntaxhighlight>
 == أمثلة ==
@@ سطر 85: / سطر 89: @@
 == البنية العامة ==
 الخاصية <code>caption-side</code> تقبل إحدى الكلمتين المحجوزتين التاليتين.
-=== القيمة <code>top</code> ===
+===  <code>top</code> ===
 يجب عرض لافتة الجدول <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> فوق الجدول.
-=== القيمة <code>bottom</code> ===
+===  <code>bottom</code> ===
 يجب عرض لافتة الجدول <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> تحت الجدول.
 === البنية الرسمية ===