HTML الوسم <thead>

تعريفه

نستخدم الوسم <thead> لتجميع الأسطر الموضوعة كعناوين في أعلى الجدول بهدف تعديل تصميمها بواسطة CSS لتظهر بشكل مختلف عن باقي الأسطر الموضوعة فيه.


معلومة تقنية

في العادة عند تجميع السطر أو الأسطر الأولى في الجدول بداخل هذا الوسم فإننا نقوم بتجميع باقي الأسطر بداخل وسوم أخرى هي الوسم <tbody> الذي نضع فيه الأسطر التي تعتبر كمعلومات عادية في الجدول و الوسم <tfoot> الذي نضع فيه السطر أو الأسطر الأخيرة في الجدول و التي تكون بمثابة نتائج نهائية فيه.

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

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

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

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

إستخدامه

في المثال التالي قمنا بإنشاء جدول يتألف من 5 أسطر مع تجميع أسطره على النحو التالي:

  • السطر الأول وضعناه بداخل وسم <thead> لأنه يحتوي عنواين أسطر الجدول.
  • الأسطر التي تليه وضعناه بداخل وسم <tbody> لأنه تحتوي معلومات الجدول العادية.
  • السطر الأخير وضعناه بداخل وسم <tfoot> لأنه يحتوي النتائج النهائية لمعلومات الجدول.

جميع الخانات التي قمنا بوضعها في الجدول سيتم إعطاؤها تصميم بشكل تلقائي نسبةً لكود التصميم الذي وضعناه للوسم <thead> و <tbody> و <tfoot> التي وضعناها بداخلها.

مثال

<table>
	<!-- <thead> السطر الأول في الجدول وضعناه بداخل الوسم -->
	<thead>
		<tr>
			<th>ID</th>
			<th>Name</th>
		</tr>
	<thead>
	<!-- <tbody> الأسطر التي تحتوي معلومات عادية في الجدول وضعناها بداخل الوسم -->
	<tbody>
		<tr>
			<td>1</td>
			<td>mhamad</td>
		</tr>
		<tr>
			<td>2</td>
			<td>rima</td>
		</tr>
		<tr>
			<td>3</td>
			<td>youssef</td>
		</tr>
	</tbody>
	<!-- <tfoot> السطر الأخير في الجدول وضعناه بداخل الوسم -->
	</tfoot>
		<tr>
			<td>Total</td>
			<td>3 users</td>
		</tr>
	</tfoot>
</table>
		

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

thead {
	display: table-header-group;
	vertical-align: middle;
	border-color: inherit;
}
	

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة