تعريفه
نستخدم الوسم <caption>
لإضافة عنوان أو وصف بسيط للجدول.
عند استخدام هذا الوسم يجب وضعه كأول وسم بداخل الجدول على النحو التالي.
<table> <caption>title</caption> ... </table>
مكان الكلمة title
نضع النص أو الوصف الذي نريد وضعه للجدول.
<caption>
نستخدم الوسم <caption>
لإضافة عنوان أو وصف بسيط للجدول.
عند استخدام هذا الوسم يجب وضعه كأول وسم بداخل الجدول على النحو التالي.
<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>
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
caption { display: table-caption; text-align: center; }
إستخدام هذا الوسم كما هو بدون تحسين تصميمه بواسطة كود CSS قد لا تجد له أي فائدة.
فمثلاً إذا قمت بتحسين طريقة ظهوره بواسطة كود CSS يمكنك تحديد مكان ظهورة و لون خلفيته إلخ.. و عندها ستجد فائدته.
في المثال التالي قمنا بجعل العنوان يظهر أسفل الجدول و في المنتصف مع إضافة هامش حوله بمقدار 10 بكسل.
caption { caption-side: bottom; text-align: center; padding: 10px; }
شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.