HTML الوسم <caption>

تعريفه

نستخدم الوسم <caption> لإضافة عنوان أو وصف بسيط للجدول.
عند استخدام هذا الوسم يجب وضعه كأول وسم بداخل الجدول على النحو التالي.

<table>
    <caption>title</caption>
    ...
</table>
	

مكان الكلمة title نضع النص أو الوصف الذي نريد وضعه للجدول.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <caption>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بوضع عنوان للجدول بواسطة الوسم <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;
}
		

جرب الكود