HTMLالوسم <caption>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
نستخدم الوسم <caption> لإضافة عنوان أو وصف بسيط للجدول.
عند استخدام هذا الوسم يجب وضعه كأول وسم بداخل الجدول على النحو التالي.
<table>
<caption>title</caption>
...
</table>
<table>
<caption>title</caption>
...
</table>
مكان الكلمة title نضع النص أو الوصف الذي نريد وضعه للجدول.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <caption>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | 1 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
خصائصه
لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدامه
في المثال التالي قمنا بوضع عنوان للجدول بواسطة الوسم <caption>.
مثال
<table>
<caption>Final semester marks</caption>
...
</table>
<table>
<caption>Final semester marks</caption>
...
</table>
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
caption {
display: table-caption;
text-align: center;
}
caption {
display: table-caption;
text-align: center;
}
نصائح و ملاحظات
إستخدام هذا الوسم كما هو بدون تحسين تصميمه بواسطة كود CSS قد لا تجد له أي فائدة.
فمثلاً إذا قمت بتحسين طريقة ظهوره بواسطة كود CSS يمكنك تحديد مكان ظهورة و لون خلفيته إلخ.. و عندها ستجد فائدته.
في المثال التالي قمنا بجعل العنوان يظهر أسفل الجدول و في المنتصف مع إضافة هامش حوله بمقدار 10 بكسل.
مثال
caption {
caption-side: bottom;
text-align: center;
padding: 10px;
}
caption {
caption-side: bottom;
text-align: center;
padding: 10px;
}
