الفرق بين المراجعتين لصفحة: «CSS/caption-side»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 36: | سطر 36: | ||
سنستخدم في المثال الآتي جدولين <code>[[HTML/table|<nowiki><table></nowiki>]]</code> مع لافتةٍ <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> لكل واحدٍ منهما، ثم سنستعمل الخاصية <code>caption-side</code> لضبط موضع اللافتة:<syntaxhighlight lang="html"> | سنستخدم في المثال الآتي جدولين <code>[[HTML/table|<nowiki><table></nowiki>]]</code> مع لافتةٍ <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> لكل واحدٍ منهما، ثم سنستعمل الخاصية <code>caption-side</code> لضبط موضع اللافتة:<syntaxhighlight lang="html"> | ||
<table class="top"> | <table class="top"> | ||
<caption> | <caption>اللافتة فوق الجدول</caption> | ||
<tr> | <tr> | ||
<td> | <td>بعض البيانات</td> | ||
<td> | <td>بعض البيانات الأخرى</td> | ||
</tr> | </tr> | ||
</table> | </table> | ||
| سطر 46: | سطر 46: | ||
<table class="bottom"> | <table class="bottom"> | ||
<caption> | <caption>اللافتة تحت الجدول</caption> | ||
<tr> | <tr> | ||
<td> | <td>بعض البيانات</td> | ||
<td> | <td>بعض البيانات الأخرى</td> | ||
</tr> | </tr> | ||
</table> | </table> | ||
مراجعة 17:23، 7 أغسطس 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;
مصادر ومواصفات
- مسودة CSS Logical Properties Level 1.
- مواصفة CSS Level 2 (Revision 1).