عرض مصدر CSS/caption-side

<noinclude>{{DISPLAYTITLE:الخاصية <code>caption-side</code>}}</noinclude>
الخاصية <code>caption-side</code> في CSS تُحدِّد موضع لافتة الجدول المُعرَّفة عبر العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>.<syntaxhighlight lang="css">
/* كلمات محجوزة */ 
caption-side: top; 
caption-side: bottom; 

/* القيم العامة */ 
caption-side: inherit; 
caption-side: initial; 
caption-side: unset;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>top</code>
|-
! scope="row" |تُطبَّق على
|العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للحركة
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}

== أمثلة ==
سنستخدم في المثال الآتي جدولين <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>
  <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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;
}
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|8.0
|4.0
|1.0
|}
== البنية العامة ==
الخاصية <code>caption-side</code> تقبل إحدى الكلمتين المحجوزتين التاليتين.
=== القيمة <code>top</code> ===
يجب عرض لافتة الجدول <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> فوق الجدول.
=== القيمة <code>bottom</code> ===
يجب عرض لافتة الجدول <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> تحت الجدول.
=== البنية الرسمية ===
<syntaxhighlight lang="css">
caption-side: top | bottom;

</syntaxhighlight>
== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-logical-props/#caption-side CSS Logical Properties Level 1].
* مواصفة ‎[http://www.w3.org/TR/CSS2/tables.html#caption-position CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Table]]