إعلان
تعلم الآن

HTML الوسم <tbody>

تعريفه

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


معلومة تقنية

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

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

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

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>
		

جرب الكود

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

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

tbody {
	display: table-row-group;
	vertical-align: middle;
	border-color: inherit;
}
	
إعلان
دورة قواعد بيانات MySQL في هذه الدورة ستتعلم أساسيات قواعد البيانات و أوامر SQL، العلاقات (Join) بين الجداول، Normalization مع تطبيق مشروع متكامل. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
تعلم الآن

الدورات

أدوات مساعدة

أقسام الموقع

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